From acd7396e0d885e5d8430e24f9111073d396cd370 Mon Sep 17 00:00:00 2001 From: jmfrancois Date: Wed, 11 Oct 2023 18:25:57 +0200 Subject: [PATCH] chore: refactor all exports... --- packages/design-system/package.json | 3 +- .../Primitive/CollapsiblePanelHeader.tsx | 2 +- .../Badge/primitive/BadgePrimitive.tsx | 2 +- .../Badge/variants/BadgeDropdown.tsx | 3 +- .../Badge/variants/BadgePopover.tsx | 2 +- .../components/Badge/variants/BadgeValue.tsx | 2 +- .../components/Breadcrumbs/Breadcrumbs.tsx | 8 +- .../src/components/Button/Button.cy.tsx | 2 +- .../Button/Primitive/ButtonPrimitive.tsx | 2 +- .../Primitive/ButtonIconPrimitive.tsx | 4 +- .../src/components/ButtonIcon/index.ts | 2 +- .../ButtonIcon/variations/ButtonIcon.tsx | 4 +- .../src/components/Card/Card.tsx | 8 +- .../src/components/Card/index.ts | 2 +- .../src/components/Divider/Divider.tsx | 3 +- .../src/components/Divider/index.ts | 4 +- .../src/components/Dropdown/Dropdown.tsx | 4 +- .../src/components/Dropdown/index.ts | 4 +- .../src/components/EmptyState/EmptyState.tsx | 4 +- .../src/components/EmptyState/index.ts | 3 +- .../primitive/EmptyStatePrimitive.tsx | 2 +- .../EmptyState/variants/EmptyStateLarge.tsx | 2 +- .../EmptyState/variants/EmptyStateMedium.tsx | 2 +- .../src/components/ErrorState/ErrorState.tsx | 8 +- .../src/components/ErrorState/index.ts | 2 +- .../Form/Affix/variations/AffixButton.tsx | 3 +- .../Form/Affix/variations/AffixReadOnly.tsx | 2 +- .../Form/Field/Input/Input.File.tsx | 2 +- .../Field/Input/hooks/useRevealPassword.tsx | 2 +- .../src/components/Form/Form.tsx | 6 +- .../Form/Primitives/Field/Field.tsx | 2 +- .../src/components/Form/index.ts | 63 +++--- .../IconsProvider/IconsProvider.tsx | 2 +- .../Primitives/InlineEditingPrimitive.tsx | 2 +- .../src/components/InlineEditing/index.ts | 17 +- .../variations/InlineEditing.text.tsx | 8 +- .../variations/InlineEditing.textarea.tsx | 10 +- .../InlineMessage/InlineMessage.tsx | 68 +++--- .../src/components/InlineMessage/index.ts | 3 +- .../src/components/Link/index.ts | 1 - .../components/LinkAsButton/LinkAsButton.tsx | 6 +- .../src/components/LinkAsButton/index.ts | 4 +- .../src/components/Loading/Loading.tsx | 49 +++-- .../src/components/Loading/index.ts | 4 +- .../Message/Primitive/MessagePrimitive.tsx | 3 +- .../src/components/Popover/Popover.tsx | 4 + .../src/components/Popover/index.ts | 6 +- .../RichRadioButton.component.tsx | 4 +- .../src/components/RichRadioButton/index.ts | 4 +- .../src/components/Skeleton/Skeleton.tsx | 6 +- .../src/components/Skeleton/index.ts | 3 +- .../Status/Primitive/StatusPrimitive.tsx | 5 +- .../Stepper/Progress/Primitive/Progress.tsx | 2 +- .../Stepper/Step/Primitive/Step.tsx | 3 +- .../Stepper/Step/variations/Step.skeleton.tsx | 2 +- .../src/components/Stepper/index.ts | 15 +- .../Stepper/variations/Stepper.horizontal.tsx | 12 +- .../Stepper/variations/Stepper.vertical.tsx | 12 +- .../src/components/Switch/Switch.tsx | 4 +- .../src/components/Switch/index.ts | 4 +- .../components/Tabs/Primitive/TabAsLink.tsx | 3 +- .../Tabs/Primitive/TabNavigation.tsx | 3 +- .../design-system/src/components/Tag/Tag.tsx | 6 +- .../design-system/src/components/Tag/index.ts | 4 +- .../ThemeProvider/ThemeProvider.tsx | 4 +- .../src/components/ThemeProvider/index.ts | 8 +- .../src/components/Tooltip/Tooltip.tsx | 5 +- .../src/components/Tooltip/index.ts | 5 +- .../src/components/VisuallyHidden/index.ts | 4 +- .../src/components/illustrations/index.ts | 2 +- packages/design-system/src/index.ts | 206 +++--------------- .../stories/clickable/ButtonIcon.stories.tsx | 2 +- .../src/stories/messaging/Popover.stories.tsx | 14 +- yarn.lock | 5 - 74 files changed, 261 insertions(+), 437 deletions(-) diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 014029ce08b..0b3824c03c0 100644 --- a/packages/design-system/package.json +++ b/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", diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx index 329c2fb4231..d6933c2c1fd 100644 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx +++ b/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'; diff --git a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx index 0bcbec4e92d..97a5d3c0586 100644 --- a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx +++ b/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'; diff --git a/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx b/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx index 6d3b84181f6..e419df1d6b6 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx +++ b/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'; diff --git a/packages/design-system/src/components/Badge/variants/BadgePopover.tsx b/packages/design-system/src/components/Badge/variants/BadgePopover.tsx index 77b76da3c1e..e3a15f028e5 100644 --- a/packages/design-system/src/components/Badge/variants/BadgePopover.tsx +++ b/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'; diff --git a/packages/design-system/src/components/Badge/variants/BadgeValue.tsx b/packages/design-system/src/components/Badge/variants/BadgeValue.tsx index 8f28a2331b6..265d8ce0e48 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeValue.tsx +++ b/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 & { /** diff --git a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx index 7c6d46a101a..1328d20528a 100644 --- a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/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 = { diff --git a/packages/design-system/src/components/Button/Button.cy.tsx b/packages/design-system/src/components/Button/Button.cy.tsx index 4abf22e5d91..28e77422666 100644 --- a/packages/design-system/src/components/Button/Button.cy.tsx +++ b/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 diff --git a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx b/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx index 0c832c4e5cb..dc2aa61bc63 100644 --- a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx +++ b/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'; diff --git a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx index 043ee363ed4..aabfd2ca996 100644 --- a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx +++ b/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'; diff --git a/packages/design-system/src/components/ButtonIcon/index.ts b/packages/design-system/src/components/ButtonIcon/index.ts index 1efae09741a..e9296793e6b 100644 --- a/packages/design-system/src/components/ButtonIcon/index.ts +++ b/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'; diff --git a/packages/design-system/src/components/ButtonIcon/variations/ButtonIcon.tsx b/packages/design-system/src/components/ButtonIcon/variations/ButtonIcon.tsx index 56b4069e6ba..c8a83ad2ade 100644 --- a/packages/design-system/src/components/ButtonIcon/variations/ButtonIcon.tsx +++ b/packages/design-system/src/components/ButtonIcon/variations/ButtonIcon.tsx @@ -10,8 +10,6 @@ function Button(props: ButtonIconType, ref: Ref; } -const ButtonIcon = forwardRef(Button) as ( +export const ButtonIcon = forwardRef(Button) as ( props: ButtonIconType & { ref?: Ref }, ) => ReturnType; - -export default ButtonIcon; diff --git a/packages/design-system/src/components/Card/Card.tsx b/packages/design-system/src/components/Card/Card.tsx index cf962c97116..041fcf6d9a3 100644 --- a/packages/design-system/src/components/Card/Card.tsx +++ b/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 (
@@ -19,5 +19,3 @@ function Card({ header, children }: CardPropsType) {
); } - -export default Card; diff --git a/packages/design-system/src/components/Card/index.ts b/packages/design-system/src/components/Card/index.ts index c68311df80b..ca0b060473a 100644 --- a/packages/design-system/src/components/Card/index.ts +++ b/packages/design-system/src/components/Card/index.ts @@ -1 +1 @@ -export { default } from './Card'; +export * from './Card'; diff --git a/packages/design-system/src/components/Divider/Divider.tsx b/packages/design-system/src/components/Divider/Divider.tsx index ab7d2f03c45..65ce1e5acd3 100644 --- a/packages/design-system/src/components/Divider/Divider.tsx +++ b/packages/design-system/src/components/Divider/Divider.tsx @@ -13,11 +13,10 @@ export type DividerHTMLProps = HTMLAttributes & RefAttributes) => { +export const Divider = forwardRef((props: DividerProps, ref: Ref) => { const ruleOrientation = props.orientation || 'horizontal'; return
; }); Divider.displayName = 'Divider'; -export default Divider; diff --git a/packages/design-system/src/components/Divider/index.ts b/packages/design-system/src/components/Divider/index.ts index c8ee123153b..1f84888dc70 100644 --- a/packages/design-system/src/components/Divider/index.ts +++ b/packages/design-system/src/components/Divider/index.ts @@ -1,3 +1 @@ -import Divider from './Divider'; - -export default Divider; +export * from './Divider'; diff --git a/packages/design-system/src/components/Dropdown/Dropdown.tsx b/packages/design-system/src/components/Dropdown/Dropdown.tsx index f3cca675e15..459933e6cfc 100644 --- a/packages/design-system/src/components/Dropdown/Dropdown.tsx +++ b/packages/design-system/src/components/Dropdown/Dropdown.tsx @@ -52,7 +52,7 @@ export type DropdownPropsType = { 'aria-label': string; } & Partial; -const Dropdown = ({ +export const Dropdown = ({ children, 'data-test': dataTest, 'data-testid': dataTestId, @@ -176,5 +176,3 @@ const Dropdown = ({ }; Dropdown.displayName = 'Dropdown'; - -export default Dropdown; diff --git a/packages/design-system/src/components/Dropdown/index.ts b/packages/design-system/src/components/Dropdown/index.ts index 3cb55749df3..2f29bad4e67 100644 --- a/packages/design-system/src/components/Dropdown/index.ts +++ b/packages/design-system/src/components/Dropdown/index.ts @@ -1,3 +1 @@ -import Dropdown from './Dropdown'; - -export default Dropdown; +export * from './Dropdown'; diff --git a/packages/design-system/src/components/EmptyState/EmptyState.tsx b/packages/design-system/src/components/EmptyState/EmptyState.tsx index d8e31be3f09..811e28745fb 100644 --- a/packages/design-system/src/components/EmptyState/EmptyState.tsx +++ b/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) => { +export const EmptyState = forwardRef((props: EmptyStateProps, ref: Ref) => { switch (props.variant) { case 'L': { const { variant, ...rest } = props; @@ -39,5 +39,3 @@ const EmptyState = forwardRef((props: EmptyStateProps, ref: Ref) => }); EmptyState.displayName = 'EmptyState'; - -export default EmptyState; diff --git a/packages/design-system/src/components/EmptyState/index.ts b/packages/design-system/src/components/EmptyState/index.ts index b9cf05cfe80..0c2df29071e 100644 --- a/packages/design-system/src/components/EmptyState/index.ts +++ b/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 }; diff --git a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx index fd9489ef767..d5baab619c4 100644 --- a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx +++ b/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'; diff --git a/packages/design-system/src/components/EmptyState/variants/EmptyStateLarge.tsx b/packages/design-system/src/components/EmptyState/variants/EmptyStateLarge.tsx index 3a6be9af4ed..f783501c01a 100644 --- a/packages/design-system/src/components/EmptyState/variants/EmptyStateLarge.tsx +++ b/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 & { diff --git a/packages/design-system/src/components/EmptyState/variants/EmptyStateMedium.tsx b/packages/design-system/src/components/EmptyState/variants/EmptyStateMedium.tsx index a7323d92225..dd76ae68890 100644 --- a/packages/design-system/src/components/EmptyState/variants/EmptyStateMedium.tsx +++ b/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' diff --git a/packages/design-system/src/components/ErrorState/ErrorState.tsx b/packages/design-system/src/components/ErrorState/ErrorState.tsx index fac2fd14083..655c47c3c33 100644 --- a/packages/design-system/src/components/ErrorState/ErrorState.tsx +++ b/packages/design-system/src/components/ErrorState/ErrorState.tsx @@ -2,7 +2,7 @@ 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'; @@ -10,14 +10,14 @@ import ErrorIllustration from './illutstrations/ErrorIllustration'; import styles from './ErrorState.module.scss'; -type ErrorStatePropTypes = { +export type ErrorStatePropTypes = { title: string; description: string; action?: Omit, 'size'>; link?: ReactElement | LinkProps; }; -function ErrorState({ title, description, action, link }: ErrorStatePropTypes) { +export function ErrorState({ title, description, action, link }: ErrorStatePropTypes) { return (
@@ -35,5 +35,3 @@ function ErrorState({ title, description, action, link }: ErrorStatePropTypes) {
); } - -export default ErrorState; diff --git a/packages/design-system/src/components/ErrorState/index.ts b/packages/design-system/src/components/ErrorState/index.ts index b17df79da3f..c8a7981cdb2 100644 --- a/packages/design-system/src/components/ErrorState/index.ts +++ b/packages/design-system/src/components/ErrorState/index.ts @@ -1 +1 @@ -export { default } from './ErrorState'; +export * from './ErrorState'; diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx index 275cb839ac0..3bff6dcb57a 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx +++ b/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx @@ -5,7 +5,7 @@ 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'; @@ -13,7 +13,6 @@ import { SizedIcon } from '../../../Icon'; import styles from '../AffixStyles.module.scss'; import { mergeRefs } from '../../../../mergeRef'; -import { TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip/Tooltip'; type CommonAffixButtonPropsType = { children: string; diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx index 0b577f34743..7ed1f178320 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx +++ b/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'; diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx index 6307ddfdbb1..bae2b6e7715 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx +++ b/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, diff --git a/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx b/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx index 6fed2013d71..a4e37e2b1be 100644 --- a/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx +++ b/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'; diff --git a/packages/design-system/src/components/Form/Form.tsx b/packages/design-system/src/components/Form/Form.tsx index 95e984a689a..f42198c2a87 100644 --- a/packages/design-system/src/components/Form/Form.tsx +++ b/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 & { +export type FormProps = FormHTMLAttributes & { disabled?: boolean; readOnly?: boolean; }; -const Form = forwardRef( +export const Form = forwardRef( ({ disabled, readOnly, children, ...rest }: FormProps, ref: Ref) => { const childrenProps: { disabled?: boolean; readOnly?: boolean } = {}; if (disabled) childrenProps.disabled = true; @@ -27,5 +27,3 @@ const Form = forwardRef( ); Form.displayName = 'Form'; - -export default Form; diff --git a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx index a8298a0dd4d..cfc678424a1 100644 --- a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx +++ b/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 = diff --git a/packages/design-system/src/components/Form/index.ts b/packages/design-system/src/components/Form/index.ts index 51e781af921..e126ed71986 100644 --- a/packages/design-system/src/components/Form/index.ts +++ b/packages/design-system/src/components/Form/index.ts @@ -5,12 +5,13 @@ import Input from './Field/Input'; import Select from './Field/Select'; import Textarea from './Field/Textarea'; import Fieldset from './Fieldset'; -import Form from './Form'; +import { Form as FormBase, FormProps } from './Form'; import Label from './Label'; import Row from './Row'; import { Checkbox } from './Checkbox'; -export const FormComponent = Form as typeof Form & { +export type { FormProps }; +export type FormType = typeof FormBase & { Row: typeof Row; Color: typeof Input.Color; Checkbox: typeof Checkbox; @@ -40,34 +41,32 @@ export const FormComponent = Form as typeof Form & { ToggleSwitch: typeof ToggleSwitch; }; -FormComponent.Row = Row; +export const Form = FormBase as FormType; +Form.Row = Row; +Form.Color = Input.Color; +Form.Copy = Input.Copy; +Form.Checkbox = Checkbox; +Form.Datalist = Datalist; +Form.Date = Input.Date; +Form.DatetimeLocal = Input.DatetimeLocal; +Form.Email = Input.Email; +Form.Fieldset = Fieldset; +Form.File = Input.File; +Form.Hidden = Input.Hidden; +Form.Label = Label; +Form.Month = Input.Month; +Form.Number = Input.Number; +Form.Password = Input.Password; +Form.Radio = Input.Radio; +Form.Search = Input.Search; +Form.Select = Select; +Form.ToggleSwitch = ToggleSwitch; +Form.Tel = Input.Tel; +Form.Text = Input.Text; +Form.Textarea = Textarea; +Form.Time = Input.Time; +Form.Url = Input.Url; +Form.Week = Input.Week; +Form.Input = Input; -FormComponent.Color = Input.Color; -FormComponent.Copy = Input.Copy; -FormComponent.Checkbox = Checkbox; -FormComponent.Datalist = Datalist; -FormComponent.Date = Input.Date; -FormComponent.DatetimeLocal = Input.DatetimeLocal; -FormComponent.Email = Input.Email; -FormComponent.Fieldset = Fieldset; -FormComponent.File = Input.File; -FormComponent.Hidden = Input.Hidden; -FormComponent.Label = Label; -FormComponent.Month = Input.Month; -FormComponent.Number = Input.Number; -FormComponent.Password = Input.Password; -FormComponent.Radio = Input.Radio; -FormComponent.Search = Input.Search; -FormComponent.Select = Select; -FormComponent.ToggleSwitch = ToggleSwitch; -FormComponent.Tel = Input.Tel; -FormComponent.Text = Input.Text; -FormComponent.Textarea = Textarea; -FormComponent.Time = Input.Time; -FormComponent.Url = Input.Url; -FormComponent.Week = Input.Week; -FormComponent.Input = Input; - -FormComponent.Buttons = Buttons; - -export default FormComponent; +Form.Buttons = Buttons; diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.tsx b/packages/design-system/src/components/IconsProvider/IconsProvider.tsx index 3d57950a6b0..10afff180fa 100644 --- a/packages/design-system/src/components/IconsProvider/IconsProvider.tsx +++ b/packages/design-system/src/components/IconsProvider/IconsProvider.tsx @@ -1,4 +1,4 @@ -import VisuallyHidden from '../VisuallyHidden'; +import { VisuallyHidden } from '../VisuallyHidden'; import assetsAPI from '@talend/assets-api'; import { ReactElement, RefObject, useState, useEffect, useRef } from 'react'; diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx index 72af8a0e640..148b91c3800 100644 --- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx +++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx @@ -15,7 +15,7 @@ import classnames from 'classnames'; import keycode from 'keycode'; import { ButtonIcon } from '../../ButtonIcon'; -import Form from '../../Form'; +import { Form } from '../../Form'; import { StackHorizontal } from '../../Stack'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants'; diff --git a/packages/design-system/src/components/InlineEditing/index.ts b/packages/design-system/src/components/InlineEditing/index.ts index bc47dc12865..ec8ebe01d76 100644 --- a/packages/design-system/src/components/InlineEditing/index.ts +++ b/packages/design-system/src/components/InlineEditing/index.ts @@ -1,12 +1,17 @@ -import InlineEditingText from './variations/InlineEditing.text'; -import InlineEditingTextarea from './variations/InlineEditing.textarea'; +import { InlineEditingText, InlineEditingTextProps } from './variations/InlineEditing.text'; +import { + InlineEditingTextarea, + InlineEditingTextareaProps, +} from './variations/InlineEditing.textarea'; -const InlineEditingComponent = InlineEditingText as typeof InlineEditingText & { +const InlineEditing = InlineEditingText as typeof InlineEditingText & { Text: typeof InlineEditingText; Textarea: typeof InlineEditingTextarea; }; -InlineEditingComponent.Text = InlineEditingText; -InlineEditingComponent.Textarea = InlineEditingTextarea; +InlineEditing.Text = InlineEditingText; +InlineEditing.Textarea = InlineEditingTextarea; -export default InlineEditingComponent; +export type InlineEditingProps = InlineEditingTextProps; +export { InlineEditing }; +export type { InlineEditingTextProps, InlineEditingTextareaProps }; diff --git a/packages/design-system/src/components/InlineEditing/variations/InlineEditing.text.tsx b/packages/design-system/src/components/InlineEditing/variations/InlineEditing.text.tsx index c9091e4862a..dc9254a0094 100644 --- a/packages/design-system/src/components/InlineEditing/variations/InlineEditing.text.tsx +++ b/packages/design-system/src/components/InlineEditing/variations/InlineEditing.text.tsx @@ -3,12 +3,12 @@ import InlineEditingPrimitive, { InlineEditingPrimitiveProps, } from '../Primitives/InlineEditingPrimitive'; -const InlineEditingText = forwardRef( - (props: Omit, ref: Ref) => { +export type InlineEditingTextProps = Omit; + +export const InlineEditingText = forwardRef( + (props: InlineEditingTextProps, ref: Ref) => { return ; }, ); InlineEditingText.displayName = 'InlineEditing.Text'; - -export default InlineEditingText; diff --git a/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.tsx b/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.tsx index f2b5554fa02..2b9f7019582 100644 --- a/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.tsx +++ b/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.tsx @@ -3,12 +3,12 @@ import InlineEditingPrimitive, { InlineEditingPrimitiveProps, } from '../Primitives/InlineEditingPrimitive'; -const InlineEditingMulti = forwardRef( - (props: Omit, ref: Ref) => { +export type InlineEditingTextareaProps = Omit; + +export const InlineEditingTextarea = forwardRef( + (props: InlineEditingTextareaProps, ref: Ref) => { return ; }, ); -InlineEditingMulti.displayName = 'InlineEditing.Multi'; - -export default InlineEditingMulti; +InlineEditingTextarea.displayName = 'InlineEditing.Multi'; diff --git a/packages/design-system/src/components/InlineMessage/InlineMessage.tsx b/packages/design-system/src/components/InlineMessage/InlineMessage.tsx index 561750b9a3e..33281225b59 100644 --- a/packages/design-system/src/components/InlineMessage/InlineMessage.tsx +++ b/packages/design-system/src/components/InlineMessage/InlineMessage.tsx @@ -18,40 +18,40 @@ type Warning = InlineMessageVariantType<'warning', InlineMessageWarningProps>; type Destructive = InlineMessageVariantType<'destructive', InlineMessageDestructiveProps>; type Beta = InlineMessageVariantType<'beta', InlineMessageBetaProps>; -export type InlineMessageType = Information | Success | Warning | Destructive | Beta; - -const InlineMessage = forwardRef((props: InlineMessageType, ref: Ref) => { - switch (props.variant) { - case 'information': { - const { variant, ...rest } = props; - return ; - } - - case 'destructive': { - const { variant, ...rest } = props; - return ; +export type InlineMessagePropTypes = Information | Success | Warning | Destructive | Beta; + +export const InlineMessage = forwardRef( + (props: InlineMessagePropTypes, ref: Ref) => { + switch (props.variant) { + case 'information': { + const { variant, ...rest } = props; + return ; + } + + case 'destructive': { + const { variant, ...rest } = props; + return ; + } + + case 'success': { + const { variant, ...rest } = props; + return ; + } + + case 'warning': { + const { variant, ...rest } = props; + return ; + } + + case 'beta': { + const { variant, ...rest } = props; + return ; + } + + default: + throw new Error("InlineMessage needs a 'variant' prop"); } - - case 'success': { - const { variant, ...rest } = props; - return ; - } - - case 'warning': { - const { variant, ...rest } = props; - return ; - } - - case 'beta': { - const { variant, ...rest } = props; - return ; - } - - default: - throw new Error("InlineMessage needs a 'variant' prop"); - } -}); + }, +); InlineMessage.displayName = 'InlineMessage'; - -export default InlineMessage; diff --git a/packages/design-system/src/components/InlineMessage/index.ts b/packages/design-system/src/components/InlineMessage/index.ts index 2690f84edac..45acafd6847 100644 --- a/packages/design-system/src/components/InlineMessage/index.ts +++ b/packages/design-system/src/components/InlineMessage/index.ts @@ -1,10 +1,11 @@ -import InlineMessage from './InlineMessage'; +import { InlineMessage, InlineMessagePropTypes } from './InlineMessage'; import InlineMessageInformation from './variations/InlineMessageInformation'; import InlineMessageSuccess from './variations/InlineMessageSuccess'; import InlineMessageWarning from './variations/InlineMessageWarning'; import InlineMessageDestructive from './variations/InlineMessageDestructive'; import InlineMessageBeta from './variations/InlineMessageBeta'; +export type { InlineMessagePropTypes }; export { InlineMessage, InlineMessageInformation, diff --git a/packages/design-system/src/components/Link/index.ts b/packages/design-system/src/components/Link/index.ts index cf5136801b2..6e93ba12193 100644 --- a/packages/design-system/src/components/Link/index.ts +++ b/packages/design-system/src/components/Link/index.ts @@ -2,4 +2,3 @@ import Link, { LinkProps, LinkComponentProps } from './Link'; export type { LinkProps, LinkComponentProps }; export { Link }; -export default Link; diff --git a/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx b/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx index e969275c10d..bf85becc428 100644 --- a/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx +++ b/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx @@ -10,10 +10,10 @@ import linkStyles from '../Link/Link.module.scss'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; import { SizedIcon } from '../Icon'; -type LinkAsButtonProps = Omit & +export type LinkAsButtonProps = Omit & Omit & { openInNewTab?: boolean }; -const LinkAsButton = forwardRef( +export const LinkAsButton = forwardRef( ( { disabled, title, icon, children, openInNewTab, ...rest }: LinkAsButtonProps, ref: Ref, @@ -85,5 +85,3 @@ const LinkAsButton = forwardRef( ); LinkAsButton.displayName = 'LinkAsButton'; - -export default LinkAsButton; diff --git a/packages/design-system/src/components/LinkAsButton/index.ts b/packages/design-system/src/components/LinkAsButton/index.ts index 2b66a8829d7..a385ce1412a 100644 --- a/packages/design-system/src/components/LinkAsButton/index.ts +++ b/packages/design-system/src/components/LinkAsButton/index.ts @@ -1,3 +1 @@ -import LinkAsButton from './LinkAsButton'; - -export { LinkAsButton }; +export * from './LinkAsButton'; diff --git a/packages/design-system/src/components/Loading/Loading.tsx b/packages/design-system/src/components/Loading/Loading.tsx index ba04b53493a..36faabc84a8 100644 --- a/packages/design-system/src/components/Loading/Loading.tsx +++ b/packages/design-system/src/components/Loading/Loading.tsx @@ -1,29 +1,30 @@ import { forwardRef } from 'react'; -const Loading = forwardRef>((props, ref) => ( - - - - - >( + (props, ref) => ( + + + - - - -)); + + + + + + ), +); Loading.displayName = 'Loading'; -export default Loading; diff --git a/packages/design-system/src/components/Loading/index.ts b/packages/design-system/src/components/Loading/index.ts index a57e39771eb..bc5115b2f8e 100644 --- a/packages/design-system/src/components/Loading/index.ts +++ b/packages/design-system/src/components/Loading/index.ts @@ -1,3 +1 @@ -import Loading from './Loading'; - -export default Loading; +export * from './Loading'; diff --git a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx index 25635c65605..68802033632 100644 --- a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx +++ b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx @@ -11,9 +11,8 @@ import Link, { LinkProps } from '../../Link/Link'; import { StackHorizontal, StackVertical } from '../../Stack'; import { ButtonTertiaryPropsType } from '../../Button/variations/ButtonTertiary'; import { ButtonTertiary } from '../../Button'; -import Dropdown from '../../Dropdown'; +import { Dropdown, DropdownPropsType } from '../../Dropdown'; import { ButtonIcon } from '../../ButtonIcon'; -import { DropdownPropsType } from '../../Dropdown/Dropdown'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants'; import styles from './MessageStyles.module.scss'; diff --git a/packages/design-system/src/components/Popover/Popover.tsx b/packages/design-system/src/components/Popover/Popover.tsx index b1722b9b7c6..bdca6d35399 100644 --- a/packages/design-system/src/components/Popover/Popover.tsx +++ b/packages/design-system/src/components/Popover/Popover.tsx @@ -26,6 +26,10 @@ export type PopoverProps = { children: ChildOrGenerator; } & PopoverOptions; +export type PopoverStateReturn = { + hide: () => void; +}; + export function Popover({ children, modal = true, diff --git a/packages/design-system/src/components/Popover/index.ts b/packages/design-system/src/components/Popover/index.ts index 234ca06ee7e..73a707e14bb 100644 --- a/packages/design-system/src/components/Popover/index.ts +++ b/packages/design-system/src/components/Popover/index.ts @@ -1,4 +1,2 @@ -import { Popover } from './Popover'; -export type { PopoverProps } from './Popover'; -export type { PopoverTriggerProps } from './usePopover'; -export default Popover; +export * from './Popover'; +export * from './usePopover'; diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx index da0b1894d78..159bbaebc73 100644 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx @@ -36,8 +36,8 @@ function RichRadioButtonIcon({ asset }: { asset?: LogoAsset | IllustrationAsset return null; } - -const RichRadioButton = ({ +export type { RichRadioButtonProps }; +export const RichRadioButton = ({ dataFeature, description, asset, diff --git a/packages/design-system/src/components/RichRadioButton/index.ts b/packages/design-system/src/components/RichRadioButton/index.ts index 7607a73dcc4..f9b48830d0e 100644 --- a/packages/design-system/src/components/RichRadioButton/index.ts +++ b/packages/design-system/src/components/RichRadioButton/index.ts @@ -1,3 +1 @@ -import RichRadioButton from './RichRadioButton.component'; - -export default RichRadioButton; +export * from './RichRadioButton.component'; diff --git a/packages/design-system/src/components/Skeleton/Skeleton.tsx b/packages/design-system/src/components/Skeleton/Skeleton.tsx index b565ea082c3..00d755017f8 100644 --- a/packages/design-system/src/components/Skeleton/Skeleton.tsx +++ b/packages/design-system/src/components/Skeleton/Skeleton.tsx @@ -6,14 +6,14 @@ import SkeletonHeading, { SkeletonHeadingProps } from './variations/SkeletonHead import SkeletonInput, { SkeletonInputProps } from './variations/SkeletonInput'; import SkeletonParagraph, { SkeletonParagraphProps } from './variations/SkeletonParagraph'; -type SkeletonProps = +export type SkeletonProps = | ({ variant: 'button' } & SkeletonButtonProps) | ({ variant: 'buttonIcon' } & SkeletonButtonIconProps) | ({ variant: 'heading' } & SkeletonHeadingProps) | ({ variant: 'paragraph' } & SkeletonParagraphProps) | ({ variant: 'input' } & SkeletonInputProps); -const Skeleton = forwardRef((props: SkeletonProps, ref: Ref) => { +export const Skeleton = forwardRef((props: SkeletonProps, ref: Ref) => { switch (props.variant) { case 'button': { const { variant, ...rest } = props; @@ -46,5 +46,3 @@ const Skeleton = forwardRef((props: SkeletonProps, ref: Ref) => } }); Skeleton.displayName = 'Skeleton'; - -export default Skeleton; diff --git a/packages/design-system/src/components/Skeleton/index.ts b/packages/design-system/src/components/Skeleton/index.ts index 1f14c389d36..29dafed2d48 100644 --- a/packages/design-system/src/components/Skeleton/index.ts +++ b/packages/design-system/src/components/Skeleton/index.ts @@ -1,9 +1,8 @@ -import Skeleton from './Skeleton'; +export * from './Skeleton'; import SkeletonButton from './variations/SkeletonButton'; import SkeletonButtonIcon from './variations/SkeletonButtonIcon'; import SkeletonHeading from './variations/SkeletonHeading'; import SkeletonInput from './variations/SkeletonInput'; import SkeletonParagraph from './variations/SkeletonParagraph'; -export default Skeleton; export { SkeletonHeading, SkeletonButtonIcon, SkeletonButton, SkeletonParagraph, SkeletonInput }; diff --git a/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx b/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx index 564946e4593..64c5d0a3ea8 100644 --- a/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx +++ b/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx @@ -4,13 +4,12 @@ import classnames from 'classnames'; // eslint-disable-next-line @talend/import-depth import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; -import Tooltip from '../../Tooltip'; -import Loading from '../../Loading'; +import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../Tooltip'; +import { Loading } from '../../Loading'; import { SizedIcon } from '../../Icon'; import { StackHorizontal } from '../../Stack'; import styles from './Status.module.scss'; -import { TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../Tooltip/Tooltip'; import { mergeRefs } from '../../../mergeRef'; export const variants = { diff --git a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx index 4bdc96b2589..542e2c86083 100644 --- a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx +++ b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx @@ -2,7 +2,7 @@ import { forwardRef, HTMLAttributes, ReactElement, Ref } from 'react'; import { useTranslation } from 'react-i18next'; import classnames from 'classnames'; -import VisuallyHidden from '../../../VisuallyHidden'; +import { VisuallyHidden } from '../../../VisuallyHidden'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../constants'; import styles from './Progress.module.scss'; diff --git a/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx b/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx index 7a9d36363d2..0e6bc079e6c 100644 --- a/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx +++ b/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx @@ -1,9 +1,8 @@ import { forwardRef, ReactElement, Ref } from 'react'; import classnames from 'classnames'; -import Tooltip from '../../../Tooltip'; +import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip'; import styles from './Step.module.scss'; -import { TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip/Tooltip'; export type StepStatus = 'disabled' | 'enabled' | 'error' | 'progress' | 'skeleton' | 'validated'; diff --git a/packages/design-system/src/components/Stepper/Step/variations/Step.skeleton.tsx b/packages/design-system/src/components/Stepper/Step/variations/Step.skeleton.tsx index e02d0a457c6..df0195f06ef 100644 --- a/packages/design-system/src/components/Stepper/Step/variations/Step.skeleton.tsx +++ b/packages/design-system/src/components/Stepper/Step/variations/Step.skeleton.tsx @@ -1,5 +1,5 @@ import { memo, forwardRef, Ref } from 'react'; -import Skeleton from '../../../Skeleton'; +import { Skeleton } from '../../../Skeleton'; import classnames from 'classnames'; import stepStyles from '../Primitive/Step.module.scss'; diff --git a/packages/design-system/src/components/Stepper/index.ts b/packages/design-system/src/components/Stepper/index.ts index ed5274f0892..525bf9c7d32 100644 --- a/packages/design-system/src/components/Stepper/index.ts +++ b/packages/design-system/src/components/Stepper/index.ts @@ -1,16 +1,17 @@ -import StepperVertical from './variations/Stepper.vertical'; -import StepperHorizontal from './variations/Stepper.horizontal'; +import { StepperVertical, StepperVerticalProps } from './variations/Stepper.vertical'; +import { StepperHorizontal, StepperHorizontalProps } from './variations/Stepper.horizontal'; import Step from './Step'; -const StepperComponent = StepperVertical as typeof StepperVertical & { +const Stepper = StepperVertical as typeof StepperVertical & { Vertical: typeof StepperVertical; Horizontal: typeof StepperHorizontal; Step: typeof Step; }; -StepperComponent.Vertical = StepperVertical; -StepperComponent.Horizontal = StepperHorizontal; +Stepper.Vertical = StepperVertical; +Stepper.Horizontal = StepperHorizontal; -StepperComponent.Step = Step; +Stepper.Step = Step; -export default StepperComponent; +export type { StepperVerticalProps, StepperHorizontalProps }; +export { Stepper }; diff --git a/packages/design-system/src/components/Stepper/variations/Stepper.horizontal.tsx b/packages/design-system/src/components/Stepper/variations/Stepper.horizontal.tsx index bfd9041c4ed..fb3ff250cd3 100644 --- a/packages/design-system/src/components/Stepper/variations/Stepper.horizontal.tsx +++ b/packages/design-system/src/components/Stepper/variations/Stepper.horizontal.tsx @@ -1,12 +1,12 @@ import { forwardRef, Ref } from 'react'; import Stepper, { StepperProps } from '../Stepper'; -type StepperHorizontalProps = Omit; +export type StepperHorizontalProps = Omit; -const StepperHorizontal = forwardRef((props: StepperHorizontalProps, ref: Ref) => ( - -)); +export const StepperHorizontal = forwardRef( + (props: StepperHorizontalProps, ref: Ref) => ( + + ), +); StepperHorizontal.displayName = 'StepperHorizontal'; - -export default StepperHorizontal; diff --git a/packages/design-system/src/components/Stepper/variations/Stepper.vertical.tsx b/packages/design-system/src/components/Stepper/variations/Stepper.vertical.tsx index 25749cc4b32..7787cb4ed81 100644 --- a/packages/design-system/src/components/Stepper/variations/Stepper.vertical.tsx +++ b/packages/design-system/src/components/Stepper/variations/Stepper.vertical.tsx @@ -1,12 +1,12 @@ import { forwardRef, Ref } from 'react'; import Stepper, { StepperProps } from '../Stepper'; -type StepperVerticalProps = Omit; +export type StepperVerticalProps = Omit; -const StepperVertical = forwardRef((props: StepperVerticalProps, ref: Ref) => ( - -)); +export const StepperVertical = forwardRef( + (props: StepperVerticalProps, ref: Ref) => ( + + ), +); StepperVertical.displayName = 'StepperVertical'; - -export default StepperVertical; diff --git a/packages/design-system/src/components/Switch/Switch.tsx b/packages/design-system/src/components/Switch/Switch.tsx index 7ab5dfa3aed..6d5468f2b08 100644 --- a/packages/design-system/src/components/Switch/Switch.tsx +++ b/packages/design-system/src/components/Switch/Switch.tsx @@ -21,7 +21,7 @@ export type SwitchProps = PropsWithChildren, onChange?: (event: MouseEvent, selectedValue: string) => void; }; -const Switch = ({ +export const Switch = ({ label, value, defaultValue, @@ -115,4 +115,4 @@ const Switch = ({ ); }; -export default Switch; +Switch.displayName = 'Switch'; diff --git a/packages/design-system/src/components/Switch/index.ts b/packages/design-system/src/components/Switch/index.ts index 3c587b7aae1..1b19c1d39c3 100644 --- a/packages/design-system/src/components/Switch/index.ts +++ b/packages/design-system/src/components/Switch/index.ts @@ -1,3 +1 @@ -import Switch from './Switch'; - -export default Switch; +export * from './Switch'; diff --git a/packages/design-system/src/components/Tabs/Primitive/TabAsLink.tsx b/packages/design-system/src/components/Tabs/Primitive/TabAsLink.tsx index dfa398d5922..ac7aa85ad68 100644 --- a/packages/design-system/src/components/Tabs/Primitive/TabAsLink.tsx +++ b/packages/design-system/src/components/Tabs/Primitive/TabAsLink.tsx @@ -7,10 +7,9 @@ import { StackHorizontal } from '../../Stack'; import { SizedIcon } from '../../Icon'; import styles from './TabStyles.module.scss'; -import Tooltip from '../../Tooltip'; +import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../Tooltip'; import { TagDefault } from '../../Tag'; import Linkable, { LinkableType } from '../../Linkable'; -import { TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../Tooltip/Tooltip'; import { mergeRefs } from '../../../mergeRef'; type TabChildren = Omit & { diff --git a/packages/design-system/src/components/Tabs/Primitive/TabNavigation.tsx b/packages/design-system/src/components/Tabs/Primitive/TabNavigation.tsx index fef3b7ca38b..ce2f71f0e1e 100644 --- a/packages/design-system/src/components/Tabs/Primitive/TabNavigation.tsx +++ b/packages/design-system/src/components/Tabs/Primitive/TabNavigation.tsx @@ -10,8 +10,7 @@ import { DataAttributes } from '../../../types'; import { SizedIcon } from '../../Icon'; import { StackHorizontal } from '../../Stack'; import { TagDefault } from '../../Tag'; -import Tooltip from '../../Tooltip'; -import { TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../Tooltip/Tooltip'; +import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../Tooltip'; import styles from './TabStyles.module.scss'; diff --git a/packages/design-system/src/components/Tag/Tag.tsx b/packages/design-system/src/components/Tag/Tag.tsx index a6f941e6b41..40c2aac8916 100644 --- a/packages/design-system/src/components/Tag/Tag.tsx +++ b/packages/design-system/src/components/Tag/Tag.tsx @@ -22,14 +22,14 @@ export enum TagVariant { // This const allows JS component to type props with restricted list of tag variations export const TagVariantsNames = Object.values(TagVariant); -type TagProps = Omit & { +export type TagProps = Omit & { /** * Tag variation depending on its semantic */ variant?: keyof typeof TagVariant; }; -const Tag = forwardRef(({ variant, ...rest }: TagProps, ref: Ref) => { +export const Tag = forwardRef(({ variant, ...rest }: TagProps, ref: Ref) => { switch (variant) { case TagVariant.information: return ; @@ -46,5 +46,3 @@ const Tag = forwardRef(({ variant, ...rest }: TagProps, ref: Ref; -const ThemeProvider = ({ theme = 'light', children }: ThemeProviderProps) => { +export const ThemeProvider = ({ theme = 'light', children }: ThemeProviderProps) => { const [selectedTheme, setSelectedTheme] = useState(theme); // Handle nested Providers: parent Provider doesn't have context, child does const context = useContext(ThemeContext); @@ -32,5 +32,3 @@ const ThemeProvider = ({ theme = 'light', children }: ThemeProviderProps) => { ); }; - -export default ThemeProvider; diff --git a/packages/design-system/src/components/ThemeProvider/index.ts b/packages/design-system/src/components/ThemeProvider/index.ts index 7c0edb7223c..65083eb4fdc 100644 --- a/packages/design-system/src/components/ThemeProvider/index.ts +++ b/packages/design-system/src/components/ThemeProvider/index.ts @@ -1,10 +1,10 @@ import ThemeSwitcher from './ThemeSwitcher'; -import ThemeProvider from './ThemeProvider'; +import { ThemeProvider as BaseThemeProvider, ThemeProviderProps } from './ThemeProvider'; -const TalendThemeProvider = ThemeProvider as typeof ThemeProvider & { +export const ThemeProvider = BaseThemeProvider as typeof BaseThemeProvider & { ThemeSwitcher: typeof ThemeSwitcher; }; -TalendThemeProvider.ThemeSwitcher = ThemeSwitcher; +ThemeProvider.ThemeSwitcher = ThemeSwitcher; -export default TalendThemeProvider; +export type { ThemeProviderProps }; diff --git a/packages/design-system/src/components/Tooltip/Tooltip.tsx b/packages/design-system/src/components/Tooltip/Tooltip.tsx index 43be86751ba..bf8348fe8e6 100644 --- a/packages/design-system/src/components/Tooltip/Tooltip.tsx +++ b/packages/design-system/src/components/Tooltip/Tooltip.tsx @@ -37,6 +37,7 @@ export type Placement = | 'left' | 'left-start'; +export type TooltipPlacement = Placement; export type TooltipChildrenFnProps = { onHover?: (event: any) => void; onFocus?: (event: any) => void; @@ -56,7 +57,7 @@ export type TooltipProps = { children: ChildOrGenerator; }; -const Tooltip = ({ id, children, title, placement = 'top', ...rest }: TooltipProps) => { +export const Tooltip = ({ id, children, title, placement = 'top', ...rest }: TooltipProps) => { const safeId = useId(id); const [isOpen, setIsOpen] = useState(false); const arrowRef = useRef(null); @@ -110,5 +111,3 @@ const Tooltip = ({ id, children, title, placement = 'top', ...rest }: TooltipPro ); }; - -export default Tooltip; diff --git a/packages/design-system/src/components/Tooltip/index.ts b/packages/design-system/src/components/Tooltip/index.ts index 8a72f966f24..7594a8f06c1 100644 --- a/packages/design-system/src/components/Tooltip/index.ts +++ b/packages/design-system/src/components/Tooltip/index.ts @@ -1,4 +1 @@ -import Tooltip, { Placement } from './Tooltip'; - -export type { Placement as TooltipPlacement }; -export default Tooltip; +export * from './Tooltip'; diff --git a/packages/design-system/src/components/VisuallyHidden/index.ts b/packages/design-system/src/components/VisuallyHidden/index.ts index 12cb10d5b15..f11f3f421b2 100644 --- a/packages/design-system/src/components/VisuallyHidden/index.ts +++ b/packages/design-system/src/components/VisuallyHidden/index.ts @@ -1,3 +1 @@ -import { VisuallyHidden } from './VisuallyHidden'; - -export default VisuallyHidden; +export * from './VisuallyHidden'; diff --git a/packages/design-system/src/components/illustrations/index.ts b/packages/design-system/src/components/illustrations/index.ts index f53bbdd90ef..f4a4bdb7056 100644 --- a/packages/design-system/src/components/illustrations/index.ts +++ b/packages/design-system/src/components/illustrations/index.ts @@ -13,7 +13,7 @@ import { IconUser } from './IconUser'; import { IconWarning } from './IconWarning'; import IconSpotDefault from './SpotDefault'; -export default { +export const Illustration = { IconActivity, IconChart, IconChecklist, diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index c0dbb623505..e9ec3a6bb63 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -1,183 +1,45 @@ export * from './components/Accordion'; export * from './components/Badge'; export * from './components/Breadcrumbs'; -import { - Button, - ButtonDestructive, - ButtonPrimary, - ButtonSecondary, - ButtonTertiary, -} from './components/Button'; -import { - ButtonAsLink, - ButtonDestructiveAsLink, - ButtonPrimaryAsLink, - ButtonSecondaryAsLink, - ButtonTertiaryAsLink, -} from './components/ButtonAsLink'; -import { ButtonIcon, ButtonIconFloating, ButtonIconToggle } from './components/ButtonIcon'; -import Card from './components/Card'; +export * from './components/Button'; +export * from './components/ButtonAsLink'; + +export * from './components/ButtonIcon'; +export * from './components/Card'; export * from './components/Combobox'; -import Divider from './components/Divider'; -import Dropdown from './components/Dropdown'; -import EmptyState, { - EmptyStateLarge, - EmptyStateMedium, - EmptyStateSmall, -} from './components/EmptyState'; -import ErrorState from './components/ErrorState'; -import Form from './components/Form'; -import { AffixButton, AffixReadOnly, AffixSelect } from './components/Form/Affix'; -import { Icon, SizedIcon } from './components/Icon'; -import { IconsProvider } from './components/IconsProvider'; -import InlineEditing from './components/InlineEditing'; -import { - InlineMessage, - InlineMessageBeta, - InlineMessageDestructive, - InlineMessageInformation, - InlineMessageSuccess, - InlineMessageWarning, -} from './components/InlineMessage'; -import Link from './components/Link'; -import { LinkAsButton } from './components/LinkAsButton'; -import Loading from './components/Loading'; -import { - MessageSuccess, - MessageDestructive, - MessageInformation, - MessageWarning, - MessageCollectionSuccess, - MessageCollectionDestructive, - MessageCollectionInformation, - MessageCollectionWarning, -} from './components/Message'; -import Popover, { PopoverProps, PopoverTriggerProps } from './components/Popover'; -import RichRadioButton from './components/RichRadioButton'; -import Skeleton, { - SkeletonButton, - SkeletonButtonIcon, - SkeletonHeading, - SkeletonInput, - SkeletonParagraph, -} from './components/Skeleton'; -import { - Status, - StatusCanceled, - StatusFailed, - StatusInProgress, - StatusSuccessful, - StatusWarning, -} from './components/Status'; -import Stepper from './components/Stepper'; -import Switch from './components/Switch'; -import { Tab, Tabs, TabsAsLinkList, TabsKit } from './components/Tabs'; -import { - Tag, - TagBeta, - TagDefault, - TagDestructive, - TagInformation, - TagSuccess, - TagVariantsNames, - TagWarning, -} from './components/Tag'; -import ThemeProvider from './components/ThemeProvider'; -import Tooltip, { TooltipPlacement } from './components/Tooltip'; -import VisuallyHidden from './components/VisuallyHidden'; -import Illustration from './components/illustrations'; +export * from './components/Divider'; +export * from './components/Dropdown'; +export * from './components/EmptyState'; +export * from './components/ErrorState'; +export * from './components/Form'; +export * from './components/Form/Affix'; +export * from './components/Form/ToggleSwitch'; +export * from './components/Form/Checkbox'; +export * from './components/Icon'; +export * from './components/IconsProvider'; +export * from './components/InlineEditing'; +export * from './components/InlineMessage'; +export * from './components/Link'; +export * from './components/LinkAsButton'; +export * from './components/Loading'; +export * from './components/Message'; +export * from './components/RichRadioButton'; +export * from './components/Skeleton'; +export * from './components/Status'; +export * from './components/Stepper'; +export * from './components/Switch'; +export * from './components/Tabs'; +export * from './components/Tag'; +export * from './components/ThemeProvider'; +export * from './components/VisuallyHidden'; +export * from './components/illustrations'; +export * from './components/Drawer'; export * from './components/Stack'; export * from './components/Modal'; -export * from './components/Drawer'; +export * from './components/Popover'; +export * from './components/Tooltip'; export * from './themes'; export type * from './components/Badge'; export type * from './components/Modal'; - -export { - AffixButton, - AffixReadOnly, - AffixSelect, - Button, - ButtonAsLink, - ButtonDestructive, - ButtonDestructiveAsLink, - ButtonIcon, - ButtonIconFloating, - ButtonIconToggle as Toggle, - ButtonIconToggle, - ButtonPrimary, - ButtonPrimaryAsLink, - ButtonSecondary, - ButtonSecondaryAsLink, - ButtonTertiary, - ButtonTertiaryAsLink, - Card, - Divider, - Dropdown, - EmptyState, - EmptyStateMedium, - EmptyStateSmall, - EmptyStateLarge, - ErrorState, - Form, - Icon, - IconsProvider, - InlineEditing, - InlineMessage, - InlineMessageInformation, - InlineMessageSuccess, - InlineMessageWarning, - InlineMessageDestructive, - InlineMessageBeta, - Illustration, - Link, - LinkAsButton, - Loading, - MessageCollectionSuccess, - MessageCollectionDestructive, - MessageCollectionInformation, - MessageCollectionWarning, - MessageSuccess, - MessageDestructive, - MessageInformation, - MessageWarning, - Popover, - RichRadioButton, - SizedIcon, - Skeleton, - SkeletonButton, - SkeletonButtonIcon, - SkeletonHeading, - SkeletonInput, - SkeletonParagraph, - Status, - StatusCanceled, - StatusFailed, - StatusInProgress, - StatusSuccessful, - StatusWarning, - Stepper, - Switch, - Tab, - Tabs, - TabsAsLinkList, - TabsKit, - Tag, - TagBeta, - TagDefault, - TagDestructive, - TagInformation, - TagSuccess, - TagVariantsNames, - TagWarning, - ThemeProvider, - Tooltip, - VisuallyHidden, -}; - -export type { PopoverProps, PopoverTriggerProps, TooltipPlacement }; - -export * from './components/Form/ToggleSwitch'; -export * from './components/Form/Checkbox'; diff --git a/packages/design-system/src/stories/clickable/ButtonIcon.stories.tsx b/packages/design-system/src/stories/clickable/ButtonIcon.stories.tsx index d0c5c253e04..661ff07ed62 100644 --- a/packages/design-system/src/stories/clickable/ButtonIcon.stories.tsx +++ b/packages/design-system/src/stories/clickable/ButtonIcon.stories.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Meta, StoryFn, StoryObj } from '@storybook/react'; +import { StoryFn, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { ButtonIcon, diff --git a/packages/design-system/src/stories/messaging/Popover.stories.tsx b/packages/design-system/src/stories/messaging/Popover.stories.tsx index 538992b65a6..002f824495a 100644 --- a/packages/design-system/src/stories/messaging/Popover.stories.tsx +++ b/packages/design-system/src/stories/messaging/Popover.stories.tsx @@ -1,9 +1,15 @@ import { forwardRef, Ref } from 'react'; import { action } from '@storybook/addon-actions'; -import { PopoverStateReturn } from 'reakit/ts'; -import { Popover, ButtonPrimary, ButtonIcon, StackVertical, Form } from '../../'; -import { PopoverDisclosureHTMLProps } from 'reakit'; +import { + Popover, + PopoverProps, + PopoverStateReturn, + ButtonPrimary, + ButtonIcon, + StackVertical, + Form, +} from '../../'; export default { component: Popover, @@ -13,7 +19,7 @@ export default { const EasyPopover = () => Hello hello; /* eslint-disable-next-line react/display-name */ -const OpenPopover = forwardRef((props: PopoverDisclosureHTMLProps, ref: Ref) => { +const OpenPopover = forwardRef((props: PopoverProps, ref: Ref) => { return ( Open popover diff --git a/yarn.lock b/yarn.lock index aa685c5ef4f..b1d616c1e7e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18503,11 +18503,6 @@ uncontrollable@^7.2.1: invariant "^2.2.4" react-lifecycles-compat "^3.0.4" -uncontrollable@^8.0.2: - version "8.0.2" - resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-8.0.2.tgz#ed11b9b6c785b6a471365bcd9a6789cebc4c7849" - integrity sha512-/GDx+K1STGtpgTsj5Dj3J51YaKxZDblbCQHTH1zHLuoBEWodj6MjtRVv3TUijj1JYLRLSFsFzN8NV4M3QV4d9w== - underscore@1.12.1: version "1.12.1" resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.1.tgz#7bb8cc9b3d397e201cf8553336d262544ead829e"