diff --git a/front-packages/akeneo-design-system/.gitignore b/front-packages/akeneo-design-system/.gitignore index befd89b4be18..45dd43bc50b6 100644 --- a/front-packages/akeneo-design-system/.gitignore +++ b/front-packages/akeneo-design-system/.gitignore @@ -4,4 +4,4 @@ __diff_output__ /storybook-static /stories.json /public/*standard-correctly-1-snap.png -tsconfig.build.tsbuildinfo +*.tsbuildinfo diff --git a/front-packages/akeneo-design-system/src/components/Badge/Badge.tsx b/front-packages/akeneo-design-system/src/components/Badge/Badge.tsx index c90c954a81ac..de494987b88b 100644 --- a/front-packages/akeneo-design-system/src/components/Badge/Badge.tsx +++ b/front-packages/akeneo-design-system/src/components/Badge/Badge.tsx @@ -1,7 +1,8 @@ import React, {ReactNode, Ref} from 'react'; -import {Override} from '../../shared'; +import type {Override} from '../../shared/override'; import styled, {css} from 'styled-components'; -import {AkeneoThemedProps, getColor, getColorForLevel, getFontSize, Level} from '../../theme'; +import type {AkeneoThemedProps, Level} from '../../theme/theme'; +import {getColor, getColorForLevel, getFontSize} from '../../theme/theme'; const BadgeContainer = styled.span` display: inline-flex; @@ -44,7 +45,7 @@ type BadgeProps = Override< /** * Badges are used for items that must be: tagged, categorized, organized by keywords, or to highlight information. */ -const Badge = React.forwardRef( +const Badge: React.FC}> = React.forwardRef( ({level = 'primary', children, ...rest}: BadgeProps, forwardedRef: Ref) => { return ( diff --git a/front-packages/akeneo-design-system/src/components/Block/Block.tsx b/front-packages/akeneo-design-system/src/components/Block/Block.tsx index 1dc241117410..c00316002087 100644 --- a/front-packages/akeneo-design-system/src/components/Block/Block.tsx +++ b/front-packages/akeneo-design-system/src/components/Block/Block.tsx @@ -2,7 +2,8 @@ import React, {ReactNode, Ref, useEffect, useRef, useState} from 'react'; import styled, {css} from 'styled-components'; import {AkeneoThemedProps, getColor, getFontSize} from '../../theme'; import {Override} from '../../shared'; -import {ArrowDownIcon, ArrowUpIcon} from '../../icons'; +import {ArrowDownIcon} from '../../icons/ArrowDownIcon'; +import {ArrowUpIcon} from '../../icons/ArrowUpIcon'; import {IconButton} from '../IconButton/IconButton'; type BlockProps = Override< @@ -117,7 +118,7 @@ const Container = styled.div` } `; -const Block = React.forwardRef( +const Block: React.FC}> = React.forwardRef( ( { title, diff --git a/front-packages/akeneo-design-system/src/components/BlockButton/BlockButton.tsx b/front-packages/akeneo-design-system/src/components/BlockButton/BlockButton.tsx index f1c41197ddb9..b2dcc188fb18 100644 --- a/front-packages/akeneo-design-system/src/components/BlockButton/BlockButton.tsx +++ b/front-packages/akeneo-design-system/src/components/BlockButton/BlockButton.tsx @@ -2,7 +2,6 @@ import React, { ButtonHTMLAttributes, Children, cloneElement, - forwardRef, isValidElement, ReactElement, ReactNode, @@ -12,7 +11,7 @@ import React, { import styled, {css} from 'styled-components'; import {AkeneoThemedProps, getColor, getFontSize} from '../../theme'; import {Override} from '../../shared'; -import {IconProps} from '../../icons'; +import type {IconProps} from '../../icons/IconProps'; type BlockButtonProps = Override< ButtonHTMLAttributes, @@ -110,7 +109,7 @@ const ActionsContainer = styled.div` align-items: center; `; -const BlockButton = forwardRef( +const BlockButton: React.FC}> = React.forwardRef( ( {icon, disabled = false, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, onClick, ...rest}: BlockButtonProps, forwardedRef: Ref diff --git a/front-packages/akeneo-design-system/src/components/Button/Button.tsx b/front-packages/akeneo-design-system/src/components/Button/Button.tsx index 32bce5465d80..30d9cac0c868 100644 --- a/front-packages/akeneo-design-system/src/components/Button/Button.tsx +++ b/front-packages/akeneo-design-system/src/components/Button/Button.tsx @@ -3,7 +3,6 @@ import React, { ButtonHTMLAttributes, Children, cloneElement, - forwardRef, isValidElement, ReactNode, Ref, @@ -12,7 +11,7 @@ import React, { import styled, {css} from 'styled-components'; import {AkeneoThemedProps, getColor, getColorForLevel, getFontSize, Level} from '../../theme'; import {Override} from '../../shared'; -import {IconProps} from '../../icons'; +import type {IconProps} from '../../icons/IconProps'; type ButtonSize = 'small' | 'default'; @@ -157,7 +156,7 @@ const Container = styled.button< * Buttons express what action will occur when the users clicks. * Buttons are used to initialize an action, either in the background or foreground of an experience. */ -const Button = forwardRef( +const Button: React.FC}> = React.forwardRef( ( { level = 'primary', diff --git a/front-packages/akeneo-design-system/src/components/Card/Card.tsx b/front-packages/akeneo-design-system/src/components/Card/Card.tsx index 7adbaac03eaf..06053a657f37 100644 --- a/front-packages/akeneo-design-system/src/components/Card/Card.tsx +++ b/front-packages/akeneo-design-system/src/components/Card/Card.tsx @@ -1,6 +1,9 @@ -import React, {isValidElement, ReactElement, ReactNode, MouseEvent, forwardRef, Ref} from 'react'; +import React, {isValidElement, ReactElement, ReactNode, MouseEvent, Ref} from 'react'; import styled, {css} from 'styled-components'; -import {Checkbox, Link, LinkProps, Image} from '../../components'; +import {Checkbox} from '../Checkbox/Checkbox'; +import {Link} from '../Link/Link'; +import type {LinkProps} from '../Link/Link'; +import {Image} from '../Image/Image'; import {AkeneoThemedProps, getColor, getFontSize} from '../../theme'; import {Override} from '../../shared'; @@ -194,7 +197,7 @@ type CardProps = Override< * Cards are used to have a good visual representation of the items to display. * Cards can be used in a grid or in a collection. */ -const CardComponent = forwardRef( +const CardComponent: React.FC}> = React.forwardRef( ( { src, diff --git a/front-packages/akeneo-design-system/src/components/Checkbox/Checkbox.tsx b/front-packages/akeneo-design-system/src/components/Checkbox/Checkbox.tsx index 6e82740b50ad..56654478d43a 100644 --- a/front-packages/akeneo-design-system/src/components/Checkbox/Checkbox.tsx +++ b/front-packages/akeneo-design-system/src/components/Checkbox/Checkbox.tsx @@ -1,7 +1,8 @@ import React, {ReactNode, Ref, SyntheticEvent} from 'react'; import styled, {css, keyframes} from 'styled-components'; import {AkeneoThemedProps, getColor, getFontSize} from '../../theme'; -import {CheckIcon, CheckPartialIcon} from '../../icons'; +import {CheckIcon} from '../../icons/CheckIcon'; +import {CheckPartialIcon} from '../../icons/CheckPartialIcon'; import {useId, useShortcut} from '../../hooks'; import {Key, Override} from '../../shared'; @@ -119,7 +120,7 @@ type CheckboxProps = Override< /** * The checkboxes are applied when users can select all, several, or none of the options from a given list. */ -const Checkbox = React.forwardRef( +const Checkbox: React.FC}> = React.forwardRef( ( { checked = false, diff --git a/front-packages/akeneo-design-system/src/components/Collapse/Collapse.tsx b/front-packages/akeneo-design-system/src/components/Collapse/Collapse.tsx index 1f606293f70c..e861584e1196 100644 --- a/front-packages/akeneo-design-system/src/components/Collapse/Collapse.tsx +++ b/front-packages/akeneo-design-system/src/components/Collapse/Collapse.tsx @@ -1,8 +1,9 @@ import React, {Ref, ReactNode, useRef, useState, useEffect} from 'react'; import styled from 'styled-components'; import {getColor, getFontSize} from '../../theme'; -import {IconButton} from '../../components'; -import {CheckPartialIcon, PlusIcon} from '../../icons'; +import {IconButton} from '../IconButton/IconButton'; +import {CheckPartialIcon} from '../../icons/CheckPartialIcon'; +import {PlusIcon} from '../../icons/PlusIcon'; const ANIMATION_DURATION = 100; @@ -75,7 +76,7 @@ type CollapseProps = { /** * The collapse is used to organise groups of elements and possibly hide them. */ -const Collapse = React.forwardRef( +const Collapse: React.FC}> = React.forwardRef( ( {label, collapseButtonLabel, isOpen, onCollapse, children, ...rest}: CollapseProps, forwardedRef: Ref diff --git a/front-packages/akeneo-design-system/src/components/Dropdown/Dropdown.tsx b/front-packages/akeneo-design-system/src/components/Dropdown/Dropdown.tsx index c75d94924df2..f1778cb19e6c 100644 --- a/front-packages/akeneo-design-system/src/components/Dropdown/Dropdown.tsx +++ b/front-packages/akeneo-design-system/src/components/Dropdown/Dropdown.tsx @@ -44,7 +44,7 @@ const Dropdown = ({children, ...rest}: DropdownProps) => { const decoratedChildren = Children.map(children, child => { if (!isValidElement(child) || child.type !== Overlay) return child; - return cloneElement(child, { + return cloneElement(child as any, { parentRef: ref, }); }); diff --git a/front-packages/akeneo-design-system/src/components/Dropdown/Dropdown.unit.tsx b/front-packages/akeneo-design-system/src/components/Dropdown/Dropdown.unit.tsx index ac756ad481b9..0272ef58746a 100644 --- a/front-packages/akeneo-design-system/src/components/Dropdown/Dropdown.unit.tsx +++ b/front-packages/akeneo-design-system/src/components/Dropdown/Dropdown.unit.tsx @@ -4,7 +4,7 @@ import {Link, Image, Button} from '../../components'; import {render, screen, fireEvent} from '../../storybook/test-util'; import {Checkbox} from '../Checkbox/Checkbox'; import {Surtitle} from './Surtitle/Surtitle'; -import {GroupsIllustration} from '../../illustrations'; +import {GroupsIllustration} from '../../illustrations/GroupsIllustration'; test('it renders its children properly', () => { render( diff --git a/front-packages/akeneo-design-system/src/components/Dropdown/Header/Header.tsx b/front-packages/akeneo-design-system/src/components/Dropdown/Header/Header.tsx index 9bd3c712c4fc..a487ee6fb79c 100644 --- a/front-packages/akeneo-design-system/src/components/Dropdown/Header/Header.tsx +++ b/front-packages/akeneo-design-system/src/components/Dropdown/Header/Header.tsx @@ -27,7 +27,7 @@ type HeaderProps = Override< } >; -const Header = React.forwardRef( +const Header: React.FC}> = React.forwardRef( ({children}: HeaderProps, forwardedRef: Ref): React.ReactElement => { return {children}; } diff --git a/front-packages/akeneo-design-system/src/components/Dropdown/Header/Title.tsx b/front-packages/akeneo-design-system/src/components/Dropdown/Header/Title.tsx index a7052ea17596..68326590a1f9 100644 --- a/front-packages/akeneo-design-system/src/components/Dropdown/Header/Title.tsx +++ b/front-packages/akeneo-design-system/src/components/Dropdown/Header/Title.tsx @@ -22,7 +22,7 @@ type TitleProps = Override< } >; -const Title = React.forwardRef( +const Title: React.FC}> = React.forwardRef( ({children}: TitleProps, forwardedRef: Ref): React.ReactElement => { return {children}; } diff --git a/front-packages/akeneo-design-system/src/components/Dropdown/Item/Item.tsx b/front-packages/akeneo-design-system/src/components/Dropdown/Item/Item.tsx index 4a2acb1ba51e..feb778507e16 100644 --- a/front-packages/akeneo-design-system/src/components/Dropdown/Item/Item.tsx +++ b/front-packages/akeneo-design-system/src/components/Dropdown/Item/Item.tsx @@ -5,7 +5,7 @@ import {Image} from '../../../components/Image/Image'; import {Checkbox} from '../../../components/Checkbox/Checkbox'; import {Link} from '../../../components/Link/Link'; import {Key, Override} from '../../../shared'; -import {LockIcon} from '../../../icons'; +import {LockIcon} from '../../../icons/LockIcon'; import {Surtitle} from '../Surtitle/Surtitle'; const ItemLabel = styled.span` @@ -99,7 +99,7 @@ type ItemProps = Override< } >; -const Item = React.forwardRef( +const Item: React.FC}> = React.forwardRef( ( {children, onKeyDown, disabled = false, isActive = false, onClick, title, ...rest}: ItemProps, forwardedRef: Ref @@ -145,7 +145,7 @@ const Item = React.forwardRef( if (isValidElement(child) && child.type === Image) { if (size === 'default') size = 'big'; - return React.cloneElement(child, { + return React.cloneElement(child as any, { width: 34, height: 34, }); @@ -156,7 +156,7 @@ const Item = React.forwardRef( return ( <> - {React.cloneElement(child, { + {React.cloneElement(child as any, { ref: actionableRef, decorated: false, disabled, @@ -170,7 +170,7 @@ const Item = React.forwardRef( // Same for Checkboxes if (isValidElement(child) && child.type === Checkbox) { - return React.cloneElement(child, { + return React.cloneElement(child as any, { ref: actionableRef, readOnly: disabled, tabIndex: -1, diff --git a/front-packages/akeneo-design-system/src/components/Dropdown/ItemCollection/ItemCollection.tsx b/front-packages/akeneo-design-system/src/components/Dropdown/ItemCollection/ItemCollection.tsx index 4e72a5f81333..7f8b0638a0ad 100644 --- a/front-packages/akeneo-design-system/src/components/Dropdown/ItemCollection/ItemCollection.tsx +++ b/front-packages/akeneo-design-system/src/components/Dropdown/ItemCollection/ItemCollection.tsx @@ -54,7 +54,7 @@ type ItemCollectionProps = Override< } >; -const ItemCollection = React.forwardRef( +const ItemCollection: React.FC}> = React.forwardRef( ({children, onNextPage, noResultTitle, noResultIllustration, ...rest}: ItemCollectionProps, forwardedRef) => { const firstItemRef = useRef(null); const lastItemRef = useRef(null); @@ -77,7 +77,7 @@ const ItemCollection = React.forwardRef( const decoratedChildren = Children.map(children, (child, index) => { if (isValidElement(child)) { - return cloneElement(child, { + return cloneElement(child as any, { ref: 0 === index ? firstItemRef : index === childrenCount - 1 ? lastItemRef : undefined, onKeyDown: handleKeyDown, }); diff --git a/front-packages/akeneo-design-system/src/components/Dropdown/Surtitle/Surtitle.tsx b/front-packages/akeneo-design-system/src/components/Dropdown/Surtitle/Surtitle.tsx index 5e300b2a8ef7..02034d7e9213 100644 --- a/front-packages/akeneo-design-system/src/components/Dropdown/Surtitle/Surtitle.tsx +++ b/front-packages/akeneo-design-system/src/components/Dropdown/Surtitle/Surtitle.tsx @@ -19,7 +19,7 @@ const Title = styled.span` text-overflow: ellipsis; `; -type SurtitleProps = {label: string}; +type SurtitleProps = {label: string, children?: React.ReactNode}; const Surtitle: React.FC = ({label, children, ...rest}) => ( diff --git a/front-packages/akeneo-design-system/src/components/Field/Field.tsx b/front-packages/akeneo-design-system/src/components/Field/Field.tsx index b5a6ffdde88d..6eebdf60cca8 100644 --- a/front-packages/akeneo-design-system/src/components/Field/Field.tsx +++ b/front-packages/akeneo-design-system/src/components/Field/Field.tsx @@ -1,9 +1,14 @@ -import React, {Ref, ReactElement, ReactNode} from 'react'; +import React, {ReactElement, ReactNode, Ref} from 'react'; import styled from 'styled-components'; -import {Helper, HelperProps, InputProps, Locale, LocaleProps, Pill} from '../../components'; +import type {HelperProps} from '../Helper/Helper'; +import {Helper} from '../Helper/Helper'; +import type {LocaleProps} from '../Locale/Locale'; +import {Locale} from '../Locale/Locale'; +import type {InputProps} from '../Input/common/InputProps'; +import {Pill} from '../Pill/Pill'; import {useId} from '../../hooks'; -const FieldContainer = styled.div<{fullWidth: boolean}>` +const FieldContainer = styled.div<{ fullWidth: boolean }>` display: flex; flex-direction: column; max-width: ${({fullWidth}) => (fullWidth ? '100%' : '460px')}; @@ -83,7 +88,7 @@ type FieldProps = { /** * The Field component is used to display information around an Input component. */ -const Field = React.forwardRef( +const Field: React.FC }> = React.forwardRef( ( { label, @@ -96,7 +101,7 @@ const Field = React.forwardRef( actions, ...rest }: FieldProps, - forwardedRef: Ref + forwardedRef: Ref, ) => { const inputId = useId('input_'); const labelId = useId('label_'); @@ -116,7 +121,7 @@ const Field = React.forwardRef( return ( - {incomplete && } + {incomplete && } {channel && {channel}} - {locale && ('string' === typeof locale ? : locale)} + {locale && ('string' === typeof locale ? : locale)} {actions} {decoratedChildren} ); - } + }, ); export {Field}; diff --git a/front-packages/akeneo-design-system/src/components/Helper/Helper.tsx b/front-packages/akeneo-design-system/src/components/Helper/Helper.tsx index 6dbddb15d6d7..b19262c27c2c 100644 --- a/front-packages/akeneo-design-system/src/components/Helper/Helper.tsx +++ b/front-packages/akeneo-design-system/src/components/Helper/Helper.tsx @@ -1,6 +1,9 @@ import React, {ReactElement, ReactNode, Ref} from 'react'; import styled, {css} from 'styled-components'; -import {CheckRoundIcon, DangerIcon, IconProps, InfoRoundIcon} from '../../icons'; +import {CheckRoundIcon} from '../../icons/CheckRoundIcon'; +import {DangerIcon} from '../../icons/DangerIcon'; +import type {IconProps} from '../../icons/IconProps'; +import {InfoRoundIcon} from '../../icons/InfoRoundIcon'; import {AkeneoThemedProps, getColor} from '../../theme'; const getBackgroundColor = (level: Level) => { @@ -157,7 +160,7 @@ type HelperProps = { }; /** Helper informs the user about the features of the section. */ -const Helper = React.forwardRef( +const Helper: React.FC}> = React.forwardRef( ({level = 'info', inline = false, icon, children, ...rest}: HelperProps, forwardedRef: Ref) => { return ( diff --git a/front-packages/akeneo-design-system/src/components/IconButton/IconButton.tsx b/front-packages/akeneo-design-system/src/components/IconButton/IconButton.tsx index 23af7e7a65a0..59f0fbfe0071 100644 --- a/front-packages/akeneo-design-system/src/components/IconButton/IconButton.tsx +++ b/front-packages/akeneo-design-system/src/components/IconButton/IconButton.tsx @@ -1,6 +1,6 @@ import React, {Ref, ReactElement} from 'react'; import styled, {css} from 'styled-components'; -import {IconProps} from '../../icons'; +import type {IconProps} from '../../icons/IconProps'; import {Button, ButtonProps, ButtonSize} from '../../components/Button/Button'; import {Override} from '../../shared'; @@ -51,7 +51,7 @@ type IconButtonProps = Override< /** * The IconButton component is useful to have a clickable icon. */ -const IconButton = React.forwardRef( +const IconButton: React.FC}> = React.forwardRef( ({icon, size = 'default', ghost, ...rest}: IconButtonProps, forwardedRef: Ref) => { return ( void} & AkeneoThemedProps>` @@ -112,7 +112,7 @@ type IconCardProps = Override< } >; -const IconCard = React.forwardRef( +const IconCard: React.FC}> = React.forwardRef( ({icon, label, content, onClick, disabled = false, ...rest}: IconCardProps, forwardedRef: Ref) => { const validIcon = isValidElement(icon) && React.cloneElement(icon, {size: 30}); diff --git a/front-packages/akeneo-design-system/src/components/Image/Image.tsx b/front-packages/akeneo-design-system/src/components/Image/Image.tsx index 011bbd1779c8..c4a76d81e959 100644 --- a/front-packages/akeneo-design-system/src/components/Image/Image.tsx +++ b/front-packages/akeneo-design-system/src/components/Image/Image.tsx @@ -68,7 +68,7 @@ type ImageProps = Override< /** * Image allow to embed an image in a page. */ -const Image = React.forwardRef( +const Image: React.FC}> = React.forwardRef( ({fit = 'cover', isStacked = false, src, ...rest}: ImageProps, forwardedRef: Ref) => { return ( ( +const Information: React.FC}> = React.forwardRef( ({illustration, title, children, ...rest}: InformationProps, forwardedRef: Ref) => { const resizedIllustration = isValidElement(illustration) && React.cloneElement(illustration, {size: 80}); diff --git a/front-packages/akeneo-design-system/src/components/Information/Information.unit.tsx b/front-packages/akeneo-design-system/src/components/Information/Information.unit.tsx index 5f917377aa8c..5792867fbf61 100644 --- a/front-packages/akeneo-design-system/src/components/Information/Information.unit.tsx +++ b/front-packages/akeneo-design-system/src/components/Information/Information.unit.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {render} from '../../storybook/test-util'; import {HighlightTitle, Information} from './Information'; -import {UsersIllustration} from '../../illustrations'; +import {UsersIllustration} from '../../illustrations/UsersIllustration'; describe('A helper', () => { it('it renders an information helper', () => { diff --git a/front-packages/akeneo-design-system/src/components/Input/BooleanInput/BooleanInput.tsx b/front-packages/akeneo-design-system/src/components/Input/BooleanInput/BooleanInput.tsx index 214cd7e077e1..84817e808be4 100644 --- a/front-packages/akeneo-design-system/src/components/Input/BooleanInput/BooleanInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/BooleanInput/BooleanInput.tsx @@ -1,7 +1,9 @@ import React, {ReactNode, Ref, useCallback} from 'react'; import styled, {css} from 'styled-components'; import {AkeneoThemedProps, CommonStyle, getColor} from '../../../theme'; -import {DangerIcon, EraseIcon, LockIcon} from '../../../icons'; +import {DangerIcon} from '../../../icons/DangerIcon'; +import {EraseIcon} from '../../../icons/EraseIcon'; +import {LockIcon} from '../../../icons/LockIcon'; import {InputProps} from '../common'; import {Override} from '../../../shared'; @@ -161,7 +163,7 @@ type BooleanInputProps = Override< /** * The BooleanInput is used to quickly switch between two possible states. */ -const BooleanInput = React.forwardRef( +const BooleanInput: React.FC}> = React.forwardRef( ( { value, @@ -179,7 +181,7 @@ const BooleanInput = React.forwardRef( forwardedRef: Ref ) => { const handleChange = useCallback( - value => { + (value: any) => { if (!onChange) { return; } diff --git a/front-packages/akeneo-design-system/src/components/Input/ColorInput/ColorInput.tsx b/front-packages/akeneo-design-system/src/components/Input/ColorInput/ColorInput.tsx index 908f9c7971ac..b86e7aa74af6 100644 --- a/front-packages/akeneo-design-system/src/components/Input/ColorInput/ColorInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/ColorInput/ColorInput.tsx @@ -1,7 +1,8 @@ -import React, {ChangeEvent, forwardRef, InputHTMLAttributes, Ref, useCallback} from 'react'; +import React, {ChangeEvent, InputHTMLAttributes, Ref, useCallback} from 'react'; import styled, {css} from 'styled-components'; import {InputProps} from '../common/InputProps'; -import {DangerIcon, LockIcon} from '../../../icons'; +import {DangerIcon} from '../../../icons/DangerIcon'; +import {LockIcon} from '../../../icons/LockIcon'; import {Override} from '../../../shared'; import {AkeneoThemedProps, getColor} from '../../../theme'; import {isValidColor, convertColorToLongHexColor} from './Color'; @@ -103,7 +104,7 @@ type ColorInputProps = Override< /** * The ColorInput component allows the user to enter a color in hexadecimal format. */ -const ColorInput = forwardRef( +const ColorInput: React.FC}> = React.forwardRef( ({invalid, onChange, value, readOnly, ...rest}: ColorInputProps, forwardedRef: Ref) => { const handleChange = useCallback( (event: ChangeEvent) => { diff --git a/front-packages/akeneo-design-system/src/components/Input/DateInput/DateInput.tsx b/front-packages/akeneo-design-system/src/components/Input/DateInput/DateInput.tsx index 384b55e653e5..4a4219521bf3 100644 --- a/front-packages/akeneo-design-system/src/components/Input/DateInput/DateInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/DateInput/DateInput.tsx @@ -1,8 +1,9 @@ -import React, {ChangeEvent, forwardRef, InputHTMLAttributes, Ref, useCallback, useRef} from 'react'; +import React, {ChangeEvent, InputHTMLAttributes, Ref, useCallback, useRef} from 'react'; import styled, {css} from 'styled-components'; import {InputProps} from '../common'; import {Key, Override} from '../../../shared'; -import {LockIcon, DateIcon} from '../../../icons'; +import {LockIcon} from '../../../icons/LockIcon'; +import {DateIcon} from '../../../icons/DateIcon'; import {AkeneoThemedProps, getColor, getFontSize} from '../../../theme'; import {useShortcut} from '../../../hooks'; @@ -106,7 +107,7 @@ type DateInputProps = Override< onSubmit?: () => void; } >; -const DateInput = forwardRef( +const DateInput: React.FC}> = React.forwardRef( ({invalid, onChange, value, readOnly, onSubmit, ...rest}: DateInputProps, forwardedRef: Ref) => { const internalRef = useRef(null); forwardedRef = forwardedRef ?? internalRef; diff --git a/front-packages/akeneo-design-system/src/components/Input/MediaFileInput/MediaFileInput.tsx b/front-packages/akeneo-design-system/src/components/Input/MediaFileInput/MediaFileInput.tsx index fd09788a6132..c151bfdb01ed 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MediaFileInput/MediaFileInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/MediaFileInput/MediaFileInput.tsx @@ -3,11 +3,12 @@ import styled, {css} from 'styled-components'; import {Key, Override} from '../../../shared'; import {InputProps} from '../common/InputProps'; import {AkeneoThemedProps, getColor, getFontSize} from '../../../theme'; -import {ImportIllustration} from '../../../illustrations'; +import {ImportIllustration} from '../../../illustrations/ImportIllustration'; import {IconButton, IconButtonProps} from '../../IconButton/IconButton'; import {Image} from '../../Image/Image'; import {ProgressBar} from '../../ProgressBar/ProgressBar'; -import {CloseIcon, LockIcon} from '../../../icons'; +import {CloseIcon} from '../../../icons/CloseIcon'; +import {LockIcon} from '../../../icons/LockIcon'; import {useBooleanState, useShortcut} from '../../../hooks'; import {FileInfo} from './FileInfo'; import DefaultPictureIllustration from '../../../../static/illustrations/DefaultPicture.svg'; @@ -159,7 +160,7 @@ type MediaFileInputProps = Override< /** * Media File input allows the user to enter content when the expected user input is a file. */ -const MediaFileInput = React.forwardRef( +const MediaFileInput: React.FC}> = React.forwardRef( ( { onChange, diff --git a/front-packages/akeneo-design-system/src/components/Input/MediaLinkInput/MediaLinkInput.tsx b/front-packages/akeneo-design-system/src/components/Input/MediaLinkInput/MediaLinkInput.tsx index 8b7af416ec46..fec6e3acfc71 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MediaLinkInput/MediaLinkInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/MediaLinkInput/MediaLinkInput.tsx @@ -3,10 +3,10 @@ import styled, {css} from 'styled-components'; import {Key, Override} from '../../../shared'; import {InputProps} from '../common/InputProps'; import {AkeneoThemedProps, getColor} from '../../../theme'; -import {DefaultPictureIllustration} from '../../../illustrations'; +import {DefaultPictureIllustration} from '../../../illustrations/DefaultPictureIllustration'; import {IconButton, IconButtonProps} from '../../IconButton/IconButton'; import {Image} from '../../Image/Image'; -import {LockIcon} from '../../../icons'; +import {LockIcon} from '../../../icons/LockIcon'; import {useShortcut} from '../../../hooks'; import DefaultPicture from '../../../../static/illustrations/DefaultPicture.svg'; @@ -107,7 +107,7 @@ type MediaLinkInputProps = Override< /** * Media Link input allows the user to enter content when the expected user input is a link. */ -const MediaLinkInput = React.forwardRef( +const MediaLinkInput: React.FC}> = React.forwardRef( ( { onChange, diff --git a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/ChipInput.tsx b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/ChipInput.tsx index f8e51b73b450..6546c3a26366 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/ChipInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/ChipInput.tsx @@ -1,6 +1,7 @@ -import React, {Ref, useEffect} from 'react'; +import React, {useEffect} from 'react'; import styled from 'styled-components'; -import {CloseIcon, LockIcon} from '../../../icons'; +import {CloseIcon} from '../../../icons/CloseIcon'; +import {LockIcon} from '../../../icons/LockIcon'; import {AkeneoThemedProps, getColor, getFontSize} from '../../../theme'; import {IconButton} from '../../IconButton/IconButton'; import {useBooleanState, useShortcut, useTheme} from '../../../hooks'; @@ -102,7 +103,7 @@ type ChipInputProps = { onFocus?: () => void; }; -const ChipInput = React.forwardRef( +const ChipInput: React.FC}> = React.forwardRef( ( { id, @@ -117,7 +118,7 @@ const ChipInput = React.forwardRef( onSearchChange, onFocus, }: ChipInputProps, - forwardedRef: Ref + forwardedRef: React.Ref ) => { const theme = useTheme(); const [isLastSelected, selectLast, unselectLast] = useBooleanState(); diff --git a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx index 05d0b6b42538..3a2d6b5c3a18 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx @@ -2,10 +2,10 @@ import React, {isValidElement, ReactElement, useRef, useState} from 'react'; import styled from 'styled-components'; import {arrayUnique, Key, Override} from '../../../shared'; import {InputProps, Overlay} from '../common'; -import {IconButton} from '../../../components'; +import {IconButton} from '../../IconButton/IconButton'; import {useBooleanState, useShortcut, VerticalPosition} from '../../../hooks'; import {AkeneoThemedProps, getColor} from '../../../theme'; -import {ArrowDownIcon} from '../../../icons'; +import {ArrowDownIcon} from '../../../icons/ArrowDownIcon'; import {ChipInput, ChipValue} from './ChipInput'; import {usePagination} from '../../../hooks/usePagination'; diff --git a/front-packages/akeneo-design-system/src/components/Input/NumberInput/NumberInput.tsx b/front-packages/akeneo-design-system/src/components/Input/NumberInput/NumberInput.tsx index 97716d2ff223..2c2f692f3a1e 100644 --- a/front-packages/akeneo-design-system/src/components/Input/NumberInput/NumberInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/NumberInput/NumberInput.tsx @@ -1,7 +1,9 @@ import React, {ChangeEvent, useCallback, useRef} from 'react'; import styled, {css} from 'styled-components'; import {InputProps} from '../common/InputProps'; -import {ArrowDownIcon, ArrowUpIcon, LockIcon} from '../../../icons'; +import {ArrowDownIcon} from '../../../icons/ArrowDownIcon'; +import {ArrowUpIcon} from '../../../icons/ArrowUpIcon'; +import {LockIcon} from '../../../icons/LockIcon'; import {Key, Override} from '../../../shared'; import {AkeneoThemedProps, getColor, getFontSize} from '../../../theme'; import {useShortcut} from '../../../hooks'; @@ -122,7 +124,7 @@ type NumberInputProps = Override< /** * Number input allows the user to enter content and data when the expected user input is only numbers. */ -const NumberInput = React.forwardRef( +const NumberInput: React.FC}> = React.forwardRef( ({invalid, onChange, readOnly, step, value, onSubmit, ...rest}: NumberInputProps, forwardedRef) => { const internalRef = useRef(null); forwardedRef = forwardedRef ?? internalRef; diff --git a/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.tsx b/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.tsx index f83c1aa897c3..933e7adeb38d 100644 --- a/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.tsx @@ -15,7 +15,8 @@ import {IconButton} from '../../../components/IconButton/IconButton'; import {TextInput} from '../../../components/Input/TextInput/TextInput'; import {useBooleanState, useShortcut, VerticalPosition} from '../../../hooks'; import {AkeneoThemedProps, getColor} from '../../../theme'; -import {ArrowDownIcon, CloseIcon} from '../../../icons'; +import {ArrowDownIcon} from '../../../icons/ArrowDownIcon'; +import {CloseIcon} from '../../../icons/CloseIcon'; import {usePagination} from '../../../hooks/usePagination'; const SelectInputContainer = styled.div<{value: string | null; readOnly: boolean} & AkeneoThemedProps>` @@ -365,7 +366,7 @@ const SelectInput = ({ placeholder={placeholder} isPlaceholderVisible={null === value} onChange={handleSearch} - onClick={event => { + onClick={(event: any) => { openOverlay(); event.preventDefault(); }} diff --git a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputBody/TableInputBody.tsx b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputBody/TableInputBody.tsx index 4ba1f0a87ce8..172b305536df 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputBody/TableInputBody.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputBody/TableInputBody.tsx @@ -8,7 +8,7 @@ type TableInputBodyProps = { children?: ReactNode; }; -const TableInputBody = React.forwardRef( +const TableInputBody: React.FC}> = React.forwardRef( ({children, ...rest}: TableInputBodyProps, forwardedRef: Ref) => { const [draggedElementIndex, onDragStart, onDragEnd] = useDragElementIndex(); const {isDragAndDroppable, onReorder} = useContext(TableInputContext); diff --git a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputBoolean/TableInputBoolean.tsx b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputBoolean/TableInputBoolean.tsx index df098432e5ef..12fe11540fb8 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputBoolean/TableInputBoolean.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputBoolean/TableInputBoolean.tsx @@ -4,7 +4,8 @@ import styled from 'styled-components'; import {AkeneoThemedProps, getColor} from '../../../../theme'; import {Override} from '../../../../shared'; import {Dropdown} from '../../../Dropdown/Dropdown'; -import {ArrowDownIcon, CloseIcon} from '../../../../icons'; +import {ArrowDownIcon} from '../../../../icons/ArrowDownIcon'; +import {CloseIcon} from '../../../../icons/CloseIcon'; import {useBooleanState} from '../../../../hooks'; import {IconButton} from '../../../IconButton/IconButton'; import {TableInputReadOnlyCell} from '../shared/TableInputReadOnlyCell'; diff --git a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputCell/TableInputCell.tsx b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputCell/TableInputCell.tsx index 12ea05dc6512..489d3a3a633f 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputCell/TableInputCell.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputCell/TableInputCell.tsx @@ -10,7 +10,7 @@ const TableInputTd = styled.td<{highlighted: boolean; inError: boolean} & Akeneo type TableInputCellProps = React.TdHTMLAttributes; -const TableInputCell = React.forwardRef( +const TableInputCell: React.FC}> = React.forwardRef( ({children, ...rest}: TableInputCellProps, forwardedRef: Ref) => { return ( diff --git a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputHeader/TableInputHeader.tsx b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputHeader/TableInputHeader.tsx index 95fbee026e49..9f588a6574df 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputHeader/TableInputHeader.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputHeader/TableInputHeader.tsx @@ -25,7 +25,7 @@ type TableInputHeaderProps = { children?: ReactNode; }; -const TableInputHeader = React.forwardRef( +const TableInputHeader: React.FC}> = React.forwardRef( ({children, ...rest}: TableInputHeaderProps, forwardedRef: Ref) => { const {isDragAndDroppable} = useContext(TableInputContext); diff --git a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputHeaderCell/TableInputHeaderCell.tsx b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputHeaderCell/TableInputHeaderCell.tsx index e358a6d9fcfb..5c7831900e28 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputHeaderCell/TableInputHeaderCell.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputHeaderCell/TableInputHeaderCell.tsx @@ -18,7 +18,7 @@ const TableInputTh = styled.th` export type TableInputHeaderCellProps = React.TdHTMLAttributes; -const TableInputHeaderCell = React.forwardRef( +const TableInputHeaderCell: React.FC}> = React.forwardRef( ({children, ...rest}: TableInputHeaderCellProps, forwardedRef: Ref) => { return ( diff --git a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx index f694f095f46d..dbfb13330694 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx @@ -1,9 +1,9 @@ import styled, {css} from 'styled-components'; -import React, {forwardRef, HTMLAttributes, ReactNode, Ref, useContext, DragEvent} from 'react'; +import React, {HTMLAttributes, ReactNode, Ref, useContext, DragEvent} from 'react'; import {AkeneoThemedProps, getColor} from '../../../../theme'; import {Override} from '../../../../shared'; import {TableInputContext} from '../TableInputContext'; -import {RowIcon} from '../../../../icons'; +import {RowIcon} from '../../../../icons/RowIcon'; import {TableInputCell} from '../TableInputCell/TableInputCell'; import {PlaceholderPosition, usePlaceholderPosition} from '../../../../hooks/usePlaceholderPosition'; @@ -156,7 +156,7 @@ export type TableInputRowProps = Override< } >; -const TableInputRow = forwardRef( +const TableInputRow: React.FC}> = React.forwardRef( ( {children, rowIndex = 0, draggable, highlighted = false, onDragStart, onDragEnd, ...rest}: TableInputRowProps, forwardedRef: Ref diff --git a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputSelect/TableInputSelect.tsx b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputSelect/TableInputSelect.tsx index 4852d087b32f..e3a86ad03ea4 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputSelect/TableInputSelect.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputSelect/TableInputSelect.tsx @@ -1,7 +1,8 @@ import React, {ReactElement, ReactNode} from 'react'; import {Dropdown} from '../../../Dropdown/Dropdown'; import {useBooleanState} from '../../../../hooks'; -import {ArrowDownIcon, CloseIcon} from '../../../../icons'; +import {ArrowDownIcon} from '../../../../icons/ArrowDownIcon'; +import {CloseIcon} from '../../../../icons/CloseIcon'; import {Search} from '../../../Search/Search'; import styled from 'styled-components'; import {IconButton} from '../../../IconButton/IconButton'; @@ -61,6 +62,7 @@ type TableInputSelectProps = { bottomHelper?: ReactElement; withSearch?: boolean; onOpenChange?: (isOpen: boolean) => void; + children?: React.ReactNode; }; const TableInputSelect: React.FC = ({ diff --git a/front-packages/akeneo-design-system/src/components/Input/TagInput/TagInput.tsx b/front-packages/akeneo-design-system/src/components/Input/TagInput/TagInput.tsx index 1a6a21392b3b..b24530fbe7fd 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TagInput/TagInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TagInput/TagInput.tsx @@ -1,7 +1,8 @@ import React, {ChangeEvent, FC, KeyboardEvent, useCallback, useRef, useState} from 'react'; import styled from 'styled-components'; import {AkeneoThemedProps, getColor, getFontFamily} from '../../../theme'; -import {CloseIcon, LockIcon} from '../../../icons'; +import {CloseIcon} from '../../../icons/CloseIcon'; +import {LockIcon} from '../../../icons/LockIcon'; import {arrayUnique, Key, Override} from '../../../shared'; import {InputProps} from '../common'; diff --git a/front-packages/akeneo-design-system/src/components/Input/TextAreaInput/TextAreaInput.tsx b/front-packages/akeneo-design-system/src/components/Input/TextAreaInput/TextAreaInput.tsx index fee53f0596b0..a5cfa0c73100 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TextAreaInput/TextAreaInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TextAreaInput/TextAreaInput.tsx @@ -1,7 +1,7 @@ import React, {ChangeEvent, Ref, useCallback} from 'react'; import styled, {css} from 'styled-components'; import {InputProps} from '../common/InputProps'; -import {LockIcon} from '../../../icons'; +import {LockIcon} from '../../../icons/LockIcon'; import {Override} from '../../../shared'; import {AkeneoThemedProps, getColor, getFontSize} from '../../../theme'; import {RichTextEditor, EditorProps} from './RichTextEditor'; @@ -139,7 +139,7 @@ type TextAreaInputProps = Override< /** * The TextAreaInput component allows the user to enter large text content and can also display a Rich Text Editor. */ -const TextAreaInput = React.forwardRef( +const TextAreaInput: React.FC}> = React.forwardRef( ( { value, diff --git a/front-packages/akeneo-design-system/src/components/Input/TextInput/TextInput.tsx b/front-packages/akeneo-design-system/src/components/Input/TextInput/TextInput.tsx index f4980938df8c..82b30056d1ba 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TextInput/TextInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TextInput/TextInput.tsx @@ -1,7 +1,7 @@ -import React, {ChangeEvent, forwardRef, InputHTMLAttributes, Ref, useCallback, useRef} from 'react'; +import React, {ChangeEvent, InputHTMLAttributes, Ref, useCallback, useRef} from 'react'; import styled, {css} from 'styled-components'; import {InputProps} from '../common/InputProps'; -import {LockIcon} from '../../../icons'; +import {LockIcon} from '../../../icons/LockIcon'; import {Key, Override} from '../../../shared'; import {AkeneoThemedProps, getColor, getFontSize} from '../../../theme'; import {useShortcut} from '../../../hooks'; @@ -97,7 +97,7 @@ type TextInputProps = Override< /** * The TextInput component allows the user to enter content and data when the expected input is a single line of text. */ -const TextInput = forwardRef( +const TextInput: React.FC}> = React.forwardRef( ( {invalid, onChange, readOnly, characterLeftLabel, onSubmit, ...rest}: TextInputProps, forwardedRef: Ref diff --git a/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.tsx b/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.tsx index a341ead69ee2..4fd425b4a171 100644 --- a/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.tsx +++ b/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.tsx @@ -1,7 +1,7 @@ import React, {isValidElement, ReactElement, ReactNode} from 'react'; import styled from 'styled-components'; import {getColor, getFontSize} from '../../theme'; -import {IconProps} from '../../icons'; +import type {IconProps} from '../../icons/IconProps'; type FigureProps = { label?: string; diff --git a/front-packages/akeneo-design-system/src/components/Link/Link.tsx b/front-packages/akeneo-design-system/src/components/Link/Link.tsx index 65b4e9cdf006..13e414ea14ce 100644 --- a/front-packages/akeneo-design-system/src/components/Link/Link.tsx +++ b/front-packages/akeneo-design-system/src/components/Link/Link.tsx @@ -64,7 +64,7 @@ type LinkProps = { } & React.AnchorHTMLAttributes; /** Link redirect user to another page */ -const Link = React.forwardRef( +const Link: React.FC}> = React.forwardRef( ( {disabled = false, decorated = true, target = '_self', href, children, onClick, ...rest}: LinkProps, forwardedRef: Ref diff --git a/front-packages/akeneo-design-system/src/components/Locale/Locale.tsx b/front-packages/akeneo-design-system/src/components/Locale/Locale.tsx index b5765c2b7a49..aeff717e3421 100644 --- a/front-packages/akeneo-design-system/src/components/Locale/Locale.tsx +++ b/front-packages/akeneo-design-system/src/components/Locale/Locale.tsx @@ -1,4 +1,4 @@ -import React, {forwardRef, Ref} from 'react'; +import React, {Ref} from 'react'; import styled from 'styled-components'; import {getEmoji} from '../../shared'; import {getFontFamily, getFontSize} from '../../theme'; @@ -30,7 +30,7 @@ type LocaleProps = { /** * Component to display a locale (country and language). */ -const Locale = forwardRef( +const Locale: React.FC}> = React.forwardRef( ({code, languageLabel, ...rest}: LocaleProps, forwardedRef: Ref) => { const {0: languageCode, length, [length - 1]: countryCode} = code.split('_'); diff --git a/front-packages/akeneo-design-system/src/components/MessageBar/MessageBar.tsx b/front-packages/akeneo-design-system/src/components/MessageBar/MessageBar.tsx index c0df9401e364..12f92f510446 100644 --- a/front-packages/akeneo-design-system/src/components/MessageBar/MessageBar.tsx +++ b/front-packages/akeneo-design-system/src/components/MessageBar/MessageBar.tsx @@ -1,7 +1,11 @@ import React, {ReactNode, ReactElement, useEffect, useState, useCallback, useRef} from 'react'; import styled, {keyframes} from 'styled-components'; import {AkeneoThemedProps, getColor, getFontSize} from '../../theme'; -import {CheckIcon, CloseIcon, DangerIcon, IconProps, InfoIcon} from '../../icons'; +import {CheckIcon} from '../../icons/CheckIcon'; +import {CloseIcon} from '../../icons/CloseIcon'; +import {DangerIcon} from '../../icons/DangerIcon'; +import {InfoIcon} from '../../icons/InfoIcon'; +import type {IconProps} from '../../icons/IconProps'; import {useAutoFocus} from '../../hooks'; type MessageBarLevel = 'info' | 'success' | 'warning' | 'error'; diff --git a/front-packages/akeneo-design-system/src/components/Modal/Modal.tsx b/front-packages/akeneo-design-system/src/components/Modal/Modal.tsx index 419eba576dba..f353144bbc42 100644 --- a/front-packages/akeneo-design-system/src/components/Modal/Modal.tsx +++ b/front-packages/akeneo-design-system/src/components/Modal/Modal.tsx @@ -3,7 +3,7 @@ import {createPortal} from 'react-dom'; import styled from 'styled-components'; import {AkeneoThemedProps, CommonStyle, getColor, getFontSize} from '../../theme'; import {IconButton} from '../IconButton/IconButton'; -import {CloseIcon} from '../../icons'; +import {CloseIcon} from '../../icons/CloseIcon'; import {IllustrationProps} from '../../illustrations/IllustrationProps'; import {useShortcut} from '../../hooks'; import {Key, Override} from '../../shared'; diff --git a/front-packages/akeneo-design-system/src/components/Navigation/MainNavigationItem/MainNavigationItem.tsx b/front-packages/akeneo-design-system/src/components/Navigation/MainNavigationItem/MainNavigationItem.tsx index 05183b3cfaba..c4f778e885bc 100644 --- a/front-packages/akeneo-design-system/src/components/Navigation/MainNavigationItem/MainNavigationItem.tsx +++ b/front-packages/akeneo-design-system/src/components/Navigation/MainNavigationItem/MainNavigationItem.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import {IconProps} from '../../../icons'; +import type {IconProps} from '../../../icons/IconProps'; import {Override} from '../../../shared'; import {AkeneoThemedProps, getColor, getFontSize} from '../../../theme'; import {Tag} from '../../Tags/Tags'; @@ -97,7 +97,7 @@ type MainNavigationItemProps = Override< } >; -const MainNavigationItem = React.forwardRef( +const MainNavigationItem: React.FC}> = React.forwardRef( ({children, href, icon, active = false, disabled = false, onClick, ...rest}, forwardedRef) => { const handleClick = (event: React.MouseEvent) => { if (disabled) { @@ -113,7 +113,7 @@ const MainNavigationItem = React.forwardRef { if (React.isValidElement(child) && child.type === Tag) { if (null === tag) { - tag = child; + tag = child as any; return null; } diff --git a/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationItem/SubNavigationItem.tsx b/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationItem/SubNavigationItem.tsx index 8ed6ae8091d2..eb661275b561 100644 --- a/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationItem/SubNavigationItem.tsx +++ b/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationItem/SubNavigationItem.tsx @@ -60,7 +60,7 @@ type Props = Override< } >; -const SubNavigationItem = React.forwardRef( +const SubNavigationItem: React.FC}> = React.forwardRef( ({children, href, disabled, active, onClick, ...rest}, forwardedRef: React.Ref) => { const handleClick = (event: React.MouseEvent) => { if (disabled) { diff --git a/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx b/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx index 3c4c39d49cbd..b694b77b051b 100644 --- a/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx +++ b/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx @@ -1,6 +1,7 @@ import React, {ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes} from 'react'; import styled, {css} from 'styled-components'; -import {PanelCloseIcon, PanelOpenIcon} from '../../../icons'; +import {PanelCloseIcon} from '../../../icons/PanelCloseIcon'; +import {PanelOpenIcon} from '../../../icons/PanelOpenIcon'; import {AkeneoThemedProps, getColor} from '../../../theme'; const collapsableStyles = css<{isOpen: boolean} & AkeneoThemedProps>` @@ -130,7 +131,7 @@ const SubNavigationPanel: SubNavigationPanelCompoundType = React.forwardRef { if (React.isValidElement(child) && child.type === Collapsed) { - collapsedContent = React.cloneElement(child, {isOpen: !isOpen}); + collapsedContent = React.cloneElement(child as any, {isOpen: !isOpen}); return; } contentChildren.push(child); diff --git a/front-packages/akeneo-design-system/src/components/Pill/Pill.tsx b/front-packages/akeneo-design-system/src/components/Pill/Pill.tsx index cbdbcb0a09a8..9337570b09ea 100644 --- a/front-packages/akeneo-design-system/src/components/Pill/Pill.tsx +++ b/front-packages/akeneo-design-system/src/components/Pill/Pill.tsx @@ -20,7 +20,7 @@ type PillProps = { level?: PillLevel; }; -const Pill = React.forwardRef( +const Pill: React.FC}> = React.forwardRef( ({level = 'warning', ...rest}: PillProps, forwardedRef: Ref) => { return ; } diff --git a/front-packages/akeneo-design-system/src/components/Placeholder/Placeholder.unit.tsx b/front-packages/akeneo-design-system/src/components/Placeholder/Placeholder.unit.tsx index 0ef55f6af216..a2093a36bc9a 100644 --- a/front-packages/akeneo-design-system/src/components/Placeholder/Placeholder.unit.tsx +++ b/front-packages/akeneo-design-system/src/components/Placeholder/Placeholder.unit.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {render, screen} from 'storybook/test-util'; import {Placeholder} from './Placeholder'; -import {UsersIllustration} from '../../illustrations'; +import {UsersIllustration} from '../../illustrations/UsersIllustration'; test('it renders its children properly', () => { render( diff --git a/front-packages/akeneo-design-system/src/components/Preview/Preview.tsx b/front-packages/akeneo-design-system/src/components/Preview/Preview.tsx index 93605b87ef5f..24af649c267d 100644 --- a/front-packages/akeneo-design-system/src/components/Preview/Preview.tsx +++ b/front-packages/akeneo-design-system/src/components/Preview/Preview.tsx @@ -12,7 +12,8 @@ import styled, {css} from 'styled-components'; import {AkeneoThemedProps, getColor, getFontSize} from '../../theme'; import {Override} from '../../shared'; import {IconButton, IconButtonProps} from '../IconButton/IconButton'; -import {ArrowDownIcon, ArrowUpIcon} from '../../icons'; +import {ArrowDownIcon} from '../../icons/ArrowDownIcon'; +import {ArrowUpIcon} from '../../icons/ArrowUpIcon'; const ANIMATION_DURATION = 100; diff --git a/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx b/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx index cd0ced01d48e..305919a65b69 100644 --- a/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx +++ b/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx @@ -1,4 +1,4 @@ -import React, {forwardRef, HTMLAttributes, Ref} from 'react'; +import React, {HTMLAttributes, Ref} from 'react'; import styled, {css, keyframes} from 'styled-components'; import {AkeneoThemedProps, getColor, getColorForLevel, getFontSize, Level} from '../../theme'; import {useId} from '../../hooks'; @@ -149,7 +149,7 @@ type ProgressBarProps = { /** * Progress bar to provide users with feedback on what is going on. */ -const ProgressBar = forwardRef( +const ProgressBar: React.FC}> = React.forwardRef( ( {level, percent, title, progressLabel, light = false, size = 'small', ...rest}: ProgressBarProps, forwardedRef: Ref @@ -157,7 +157,7 @@ const ProgressBar = forwardRef( const labelId = useId('label_'); const progressBarId = useId('progress_'); - const progressBarProps = {}; + let progressBarProps: any = {}; if (percent !== 'indeterminate' && isNaN(percent)) { percent = 'indeterminate'; diff --git a/front-packages/akeneo-design-system/src/components/ProgressIndicator/ProgressIndicator.tsx b/front-packages/akeneo-design-system/src/components/ProgressIndicator/ProgressIndicator.tsx index cf924d1557b6..801de9f32ece 100644 --- a/front-packages/akeneo-design-system/src/components/ProgressIndicator/ProgressIndicator.tsx +++ b/front-packages/akeneo-design-system/src/components/ProgressIndicator/ProgressIndicator.tsx @@ -1,8 +1,8 @@ -import React, {Ref, ReactNode, isValidElement, HTMLAttributes, forwardRef, Children, cloneElement} from 'react'; +import React, {Ref, ReactNode, isValidElement, HTMLAttributes, Children, cloneElement} from 'react'; import styled from 'styled-components'; import {AkeneoThemedProps, getColor, getFontSize} from '../../theme'; import {Override} from '../../shared'; -import {CheckIcon} from '../../icons'; +import {CheckIcon} from '../../icons/CheckIcon'; type StepState = 'done' | 'inprogress' | 'todo'; @@ -83,7 +83,7 @@ type StepProps = Override< } >; -const Step = forwardRef( +const Step: React.FC}> = React.forwardRef( ({state, children, disabled, onClick, ...rest}: StepProps, forwardedRef: Ref) => { if (undefined === state) { throw new Error('ProgressIndicator.Step cannot be used outside a ProgressIndicator component'); @@ -124,7 +124,7 @@ type ProgressIndicatorProps = Override< const ProgressIndicator = ({children, ...rest}: ProgressIndicatorProps) => { const currentStepIndex = Children.toArray(children).reduce((result, child, index) => { return isValidElement(child) && child.type === Step && child.props.current === true ? index : result; - }, 0); + }, 0) as number; const decoratedChildren = Children.map(children, (child, index) => { if (!(isValidElement(child) && child.type === Step)) { diff --git a/front-packages/akeneo-design-system/src/components/Search/Search.tsx b/front-packages/akeneo-design-system/src/components/Search/Search.tsx index 544ef101a84b..97c81eb5a2d0 100644 --- a/front-packages/akeneo-design-system/src/components/Search/Search.tsx +++ b/front-packages/akeneo-design-system/src/components/Search/Search.tsx @@ -1,7 +1,7 @@ import React, {ChangeEvent, HTMLAttributes, ReactNode, RefObject} from 'react'; import styled, {css} from 'styled-components'; import {AkeneoThemedProps, getColor} from '../../theme'; -import {SearchIcon} from '../../icons'; +import {SearchIcon} from '../../icons/SearchIcon'; import {Override} from '../../shared'; const Container = styled.div<{sticky?: number} & AkeneoThemedProps>` diff --git a/front-packages/akeneo-design-system/src/components/SectionTitle/SectionTitle.tsx b/front-packages/akeneo-design-system/src/components/SectionTitle/SectionTitle.tsx index 695bac73d466..6f50955a5bee 100644 --- a/front-packages/akeneo-design-system/src/components/SectionTitle/SectionTitle.tsx +++ b/front-packages/akeneo-design-system/src/components/SectionTitle/SectionTitle.tsx @@ -1,7 +1,11 @@ import React, {Children, cloneElement, HTMLAttributes, isValidElement, ReactNode} from 'react'; import styled, {css} from 'styled-components'; import {AkeneoThemedProps, getColor, getFontSize} from '../../theme'; -import {Button, ButtonProps, IconButton, IconButtonProps} from '../../components'; +// import {, , , IconButtonProps} from '../../components'; +import {Button} from '../Button/Button'; +import type {ButtonProps} from '../Button/Button'; +import {IconButton} from '../IconButton/IconButton'; +import type {IconButtonProps} from '../IconButton/IconButton'; import {Override} from '../../shared'; const SectionTitleContainer = styled.div<{sticky?: number} & AkeneoThemedProps>` diff --git a/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx b/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx index 5a4a08105641..17981e23d0d2 100644 --- a/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx +++ b/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx @@ -1,6 +1,7 @@ -import React, {Ref, ReactNode, HTMLAttributes, forwardRef} from 'react'; +import React, {Ref, ReactNode, HTMLAttributes} from 'react'; import styled, {css} from 'styled-components'; -import {ArrowDownIcon, CloseIcon} from '../../icons'; +import {ArrowDownIcon} from '../../icons/ArrowDownIcon'; +import {CloseIcon} from '../../icons/CloseIcon'; import {AkeneoThemedProps, CommonStyle, getColor, getFontSize} from '../../theme'; import {Override} from '../../shared'; import {useId} from '../../hooks'; @@ -101,7 +102,7 @@ type SwitcherButtonProps = Override< /** * Switchers are used to switch the filter on the context or the content of a page or a table. */ -const SwitcherButton = forwardRef( +const SwitcherButton: React.FC}> = React.forwardRef( ( {label, children, onClick, deletable = false, onDelete, inline = true, ...rest}: SwitcherButtonProps, forwardedRef: Ref diff --git a/front-packages/akeneo-design-system/src/components/TabBar/TabBar.tsx b/front-packages/akeneo-design-system/src/components/TabBar/TabBar.tsx index bbead666035b..9b786a767241 100644 --- a/front-packages/akeneo-design-system/src/components/TabBar/TabBar.tsx +++ b/front-packages/akeneo-design-system/src/components/TabBar/TabBar.tsx @@ -15,7 +15,7 @@ import styled, {css} from 'styled-components'; import {AkeneoThemedProps, getColor, getFontSize} from '../../theme'; import {Dropdown} from '../Dropdown/Dropdown'; import {IconButton} from '../IconButton/IconButton'; -import {MoreIcon} from '../../icons'; +import {MoreIcon} from '../../icons/MoreIcon'; import {useBooleanState} from '../../hooks'; import {Key, Override} from '../../shared'; diff --git a/front-packages/akeneo-design-system/src/components/Table/TableActionCell/TableActionCell.tsx b/front-packages/akeneo-design-system/src/components/Table/TableActionCell/TableActionCell.tsx index 2a6ebc857c1a..eb2a51ad6a23 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableActionCell/TableActionCell.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/TableActionCell/TableActionCell.tsx @@ -1,6 +1,8 @@ import styled from 'styled-components'; import React, {ReactNode, Ref, SyntheticEvent} from 'react'; -import {Button, ButtonProps, IconButton} from '../../'; +import {Button} from '../../Button/Button'; +import type {ButtonProps} from '../../Button/Button'; +import {IconButton} from '../../IconButton/IconButton'; import {getColor} from '../../../theme'; import {Override} from '../../../shared'; @@ -27,7 +29,7 @@ type ActionCellProps = Override< } >; -const TableActionCell = React.forwardRef( +const TableActionCell: React.FC}> = React.forwardRef( ({children, ...rest}: ActionCellProps, forwardedRef: Ref) => { const decoratedChildren = React.Children.map(children, child => { if (React.isValidElement(child) && (child.type === Button || child.type === IconButton)) { diff --git a/front-packages/akeneo-design-system/src/components/Table/TableBody/TableBody.tsx b/front-packages/akeneo-design-system/src/components/Table/TableBody/TableBody.tsx index 246d56a1d764..a070e71a3bb2 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableBody/TableBody.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/TableBody/TableBody.tsx @@ -13,7 +13,7 @@ type TableBodyProps = { children?: TableBodyChild; }; -const TableBody = React.forwardRef( +const TableBody: React.FC}> = React.forwardRef( ({children, ...rest}: TableBodyProps, forwardedRef: Ref) => { const [draggedElementIndex, onDragStart, onDragEnd] = useDragElementIndex(); const {isDragAndDroppable, onReorder} = useContext(TableContext); diff --git a/front-packages/akeneo-design-system/src/components/Table/TableCell/TableCell.tsx b/front-packages/akeneo-design-system/src/components/Table/TableCell/TableCell.tsx index 12e512842561..50f5a3b54883 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableCell/TableCell.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/TableCell/TableCell.tsx @@ -1,7 +1,7 @@ import React, {ReactNode, Ref} from 'react'; import styled, {css} from 'styled-components'; import {AkeneoThemedProps, getColor} from '../../../theme'; -import {Image} from '../../../components'; +import {Image} from '../../Image/Image'; import {Override} from '../../../shared'; const TableCellContainer = styled.td<{rowTitle: boolean} & AkeneoThemedProps>` @@ -43,7 +43,7 @@ type TableCellProps = Override< } >; -const TableCell = React.forwardRef( +const TableCell: React.FC}> = React.forwardRef( ({children, rowTitle = false, ...rest}: TableCellProps, forwardedRef: Ref) => { return ( @@ -51,7 +51,7 @@ const TableCell = React.forwardRef( {React.Children.map(children, child => { if (!React.isValidElement(child) || child.type !== Image) return child; - return React.cloneElement(child, { + return React.cloneElement(child as any, { width: 44, height: 44, }); diff --git a/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx b/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx index 170d960e1ba6..fc61fdccf741 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx @@ -40,7 +40,7 @@ type TableHeaderProps = { children?: ReactNode; }; -const TableHeader = React.forwardRef( +const TableHeader: React.FC}> = React.forwardRef( ({children, sticky, ...rest}: TableHeaderProps, forwardedRef: Ref) => { const {isSelectable, isDragAndDroppable, hasWarningRows} = React.useContext(TableContext); diff --git a/front-packages/akeneo-design-system/src/components/Table/TableHeaderCell/TableHeaderCell.tsx b/front-packages/akeneo-design-system/src/components/Table/TableHeaderCell/TableHeaderCell.tsx index 10313005dc78..55705e6b5871 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableHeaderCell/TableHeaderCell.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/TableHeaderCell/TableHeaderCell.tsx @@ -1,7 +1,8 @@ import React, {ReactNode, Ref} from 'react'; import styled, {css} from 'styled-components'; import {AkeneoThemedProps, getColor} from '../../../theme'; -import {ArrowDownIcon, ArrowUpIcon} from '../../../icons'; +import {ArrowDownIcon} from '../../../icons/ArrowDownIcon'; +import {ArrowUpIcon} from '../../../icons/ArrowUpIcon'; type TableSortDirection = 'descending' | 'ascending' | 'none'; @@ -53,7 +54,7 @@ const HeaderCellContentContainer = styled.span` } `; -const TableHeaderCell = React.forwardRef( +const TableHeaderCell: React.FC}> = React.forwardRef( ( {isSortable = false, onDirectionChange, sortDirection, children, ...rest}: TableHeaderCellProps, forwardedRef: Ref diff --git a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx index 29d5ef8b5ed8..c7a7e0543caf 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx @@ -3,18 +3,18 @@ import React, { Ref, SyntheticEvent, HTMLAttributes, - forwardRef, useContext, DragEvent, MouseEvent, } from 'react'; -import styled, {css} from 'styled-components'; +import styled, {AnyStyledComponent, css} from 'styled-components'; import {AkeneoThemedProps, getColor} from '../../../theme'; -import {Checkbox} from '../../../components'; +import {Checkbox} from '../../../components/Checkbox/Checkbox'; import {Override} from '../../../shared'; import {TableContext} from '../TableContext'; import {TableCell} from '../TableCell/TableCell'; -import {RowIcon, DangerIcon} from '../../../icons'; +import {RowIcon} from '../../../icons/RowIcon'; +import {DangerIcon} from '../../../icons/DangerIcon'; import {PlaceholderPosition, usePlaceholderPosition} from '../../../hooks/usePlaceholderPosition'; type Level = 'warning'; @@ -99,7 +99,7 @@ const CheckboxContainer = styled.td<{isVisible: boolean}>` } `; -const HandleCell = styled(TableCell)` +const HandleCell = styled(TableCell as AnyStyledComponent)` cursor: grab; width: 20px; @@ -161,7 +161,7 @@ type TableRowProps = Override< } >; -const TableRow = forwardRef( +const TableRow: React.FC}> = React.forwardRef( ( { rowIndex = 0, @@ -229,7 +229,7 @@ const TableRow = forwardRef( > { + onChange={(_value: any, e: any) => { handleCheckboxChange(e); }} /> diff --git a/front-packages/akeneo-design-system/src/components/Tags/Tags.tsx b/front-packages/akeneo-design-system/src/components/Tags/Tags.tsx index 6c797589d7f6..46fb4448563b 100644 --- a/front-packages/akeneo-design-system/src/components/Tags/Tags.tsx +++ b/front-packages/akeneo-design-system/src/components/Tags/Tags.tsx @@ -76,7 +76,7 @@ type TagsProps = { /** * This component displays a set of Tag elements inline. */ -const Tags = React.forwardRef( +const Tags: React.FC}> = React.forwardRef( ({children, ...rest}: TagsProps, forwardedRef: Ref) => { const getTitle = (children?: ReactNode) => { let label = ''; diff --git a/front-packages/akeneo-design-system/src/components/Tiles/Tiles.tsx b/front-packages/akeneo-design-system/src/components/Tiles/Tiles.tsx index c8711f584087..11eb10a8b67c 100644 --- a/front-packages/akeneo-design-system/src/components/Tiles/Tiles.tsx +++ b/front-packages/akeneo-design-system/src/components/Tiles/Tiles.tsx @@ -1,8 +1,8 @@ import React, {Ref, ReactNode, isValidElement, FC, useCallback, KeyboardEvent} from 'react'; import styled, {css} from 'styled-components'; -import {IconProps} from '../../icons'; +import type {IconProps} from '../../icons/IconProps'; import {AkeneoThemedProps, getColor} from '../../theme'; -import {Key, Override} from '../../'; +import {Key, Override} from '../../shared'; type Size = 'small' | 'big'; @@ -165,7 +165,7 @@ const Tile: FC = ({icon, selected = false, size = 'small', inline = f * format. * It is a visual component made up of an icon and a label. */ -const Tiles = React.forwardRef( +const Tiles: React.FC}> = React.forwardRef( ({size = 'small', inline = false, children, ...rest}: TilesProps, forwardedRef: Ref) => { return ( diff --git a/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.tsx b/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.tsx index 04b6b2eb6e07..43e2b9d1f3a9 100644 --- a/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.tsx +++ b/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.tsx @@ -2,7 +2,7 @@ import React, {HTMLAttributes, ReactNode, useRef, useEffect, RefObject, useState import {createPortal} from 'react-dom'; import styled from 'styled-components'; import {Override} from '../../shared'; -import {HelpPlainIcon} from '../../icons'; +import {HelpPlainIcon} from '../../icons/HelpPlainIcon'; import {AkeneoThemedProps, CommonStyle, getColor, getFontSize} from '../../theme'; import {useBooleanState} from '../../hooks'; diff --git a/front-packages/akeneo-design-system/src/components/Tree/Tree.tsx b/front-packages/akeneo-design-system/src/components/Tree/Tree.tsx index 97909a851585..367b765590e3 100644 --- a/front-packages/akeneo-design-system/src/components/Tree/Tree.tsx +++ b/front-packages/akeneo-design-system/src/components/Tree/Tree.tsx @@ -2,7 +2,12 @@ import React, {SyntheticEvent, isValidElement, ReactElement, ReactNode, PropsWit import styled, {css} from 'styled-components'; import {AkeneoThemedProps, CommonStyle, getColor} from '../../theme'; import {Checkbox, CheckboxChecked} from '../Checkbox/Checkbox'; -import {ArrowRightIcon, FolderIcon, FolderPlainIcon, FoldersIcon, FoldersPlainIcon, LoaderIcon} from '../../icons'; +import {ArrowRightIcon} from '../../icons/ArrowRightIcon'; +import {FolderIcon} from '../../icons/FolderIcon'; +import {FolderPlainIcon} from '../../icons/FolderPlainIcon'; +import {FoldersIcon} from '../../icons/FoldersIcon'; +import {FoldersPlainIcon} from '../../icons/FoldersPlainIcon'; +import {LoaderIcon} from '../../icons/LoaderIcon'; const folderIconCss = css` vertical-align: middle; diff --git a/front-packages/akeneo-design-system/src/hooks/useTheme.ts b/front-packages/akeneo-design-system/src/hooks/useTheme.ts index b086a1f32e6e..ddbe3fadef0e 100644 --- a/front-packages/akeneo-design-system/src/hooks/useTheme.ts +++ b/front-packages/akeneo-design-system/src/hooks/useTheme.ts @@ -2,6 +2,6 @@ import {useContext} from 'react'; import {ThemeContext} from 'styled-components'; import {Theme} from '../theme'; -const useTheme = () => useContext(ThemeContext); +const useTheme = () => useContext(ThemeContext as any); export {useTheme}; diff --git a/front-packages/akeneo-design-system/src/illustrations/AddingValueIllustration.tsx b/front-packages/akeneo-design-system/src/illustrations/AddingValueIllustration.tsx index 1836db6b089f..d8e72880ab80 100644 --- a/front-packages/akeneo-design-system/src/illustrations/AddingValueIllustration.tsx +++ b/front-packages/akeneo-design-system/src/illustrations/AddingValueIllustration.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {IllustrationProps} from './IllustrationProps'; import AddingValue from '../../static/illustrations/AddingValue.svg'; -const AddingValueIllustration = ({title, size = 256, ...props}: IllustrationProps) => ( +const AddingValueIllustration = /* @__PURE__ */ ({title, size = 256, ...props}: IllustrationProps) => ( {title && {title}} diff --git a/front-packages/akeneo-design-system/src/theme/common.ts b/front-packages/akeneo-design-system/src/theme/common.ts index 25f0f9d2eee7..1680bd5a1cc4 100644 --- a/front-packages/akeneo-design-system/src/theme/common.ts +++ b/front-packages/akeneo-design-system/src/theme/common.ts @@ -1,5 +1,6 @@ import styled, {css, keyframes} from 'styled-components'; -import {Color, FontFamily, FontSize, getColor, getFontSize, Palette} from './theme'; +import {getColor, getFontSize} from './theme'; +import type {Color, FontFamily, FontSize, Palette} from './theme'; const CommonStyle = css` input, @@ -43,7 +44,7 @@ const placeholderStyle = css` } `; -const color: Color = { +const color: Color = /* @__PURE__ */ { blue10: '#f5f9fc', blue20: '#dee9f4', blue40: '#bdd3e9', @@ -100,7 +101,7 @@ const color: Color = { white: '#ffffff', }; -const fontSize: FontSize = { +const fontSize: FontSize = /* @__PURE__ */ { big: '15px', bigger: '17px', default: '13px', @@ -108,7 +109,7 @@ const fontSize: FontSize = { title: '28px', }; -const palette: Palette = { +const palette: Palette = /* @__PURE__ */ { primary: 'green', secondary: 'blue', tertiary: 'grey', @@ -116,7 +117,7 @@ const palette: Palette = { danger: 'red', }; -const fontFamily: FontFamily = { +const fontFamily: FontFamily = /* @__PURE__ */ { default: 'Lato, "Helvetica Neue", Helvetica, Arial, sans-serif', monospace: 'Courier, "MS Courier New", Prestige, "Everson Mono"', }; diff --git a/front-packages/akeneo-design-system/src/theme/connector/index.ts b/front-packages/akeneo-design-system/src/theme/connector/index.ts index ead5ce5b76f7..026b8312dc73 100644 --- a/front-packages/akeneo-design-system/src/theme/connector/index.ts +++ b/front-packages/akeneo-design-system/src/theme/connector/index.ts @@ -1,4 +1,4 @@ -import {Theme} from '../theme'; +import type {Theme} from '../theme'; import {color, fontSize, palette, fontFamily} from '../common'; const connectorTheme: Theme = { diff --git a/front-packages/akeneo-design-system/src/theme/index.ts b/front-packages/akeneo-design-system/src/theme/index.ts index 0c26f863dfe1..6b0f34bbb5f9 100644 --- a/front-packages/akeneo-design-system/src/theme/index.ts +++ b/front-packages/akeneo-design-system/src/theme/index.ts @@ -1,3 +1,28 @@ -export * from './common'; -export * from './theme'; -export * from './themes'; +import type {AkeneoThemedProps, Color, FontFamily, FontSize, Level, Palette, Theme} from './theme'; +import {getColor, getColorForLevel, getFontFamily, getFontSize} from './theme'; +import { + BrandedPath, + color, + CommonStyle, + fontFamily, + fontSize, + palette, + placeholderStyle, + SkeletonPlaceholder, +} from './common'; + +export type {AkeneoThemedProps, Theme, FontSize, FontFamily, Color, Level, Palette}; +export { + getColor, + getFontFamily, + getColorForLevel, + getFontSize, + color, + fontFamily, + fontSize, + palette, + CommonStyle, + BrandedPath, + SkeletonPlaceholder, + placeholderStyle, +}; diff --git a/front-packages/akeneo-design-system/src/theme/onboarder/index.ts b/front-packages/akeneo-design-system/src/theme/onboarder/index.ts index 9231c0b699cb..64f8401f7cf3 100644 --- a/front-packages/akeneo-design-system/src/theme/onboarder/index.ts +++ b/front-packages/akeneo-design-system/src/theme/onboarder/index.ts @@ -1,7 +1,7 @@ -import {Theme} from '../theme'; +import type {Theme} from '../theme'; import {color, fontSize, palette, fontFamily} from '../common'; -const onboarderTheme: Theme = { +const onboarderTheme: Theme = /* @__PURE__ */ { name: 'Onboarder', color: { ...color, diff --git a/front-packages/akeneo-design-system/src/theme/pim/index.ts b/front-packages/akeneo-design-system/src/theme/pim/index.ts index 3950f57c56e3..d1aedf5d054f 100644 --- a/front-packages/akeneo-design-system/src/theme/pim/index.ts +++ b/front-packages/akeneo-design-system/src/theme/pim/index.ts @@ -1,4 +1,4 @@ -import {Theme} from '../theme'; +import type {Theme} from '../theme'; import {color, fontSize, palette, fontFamily} from '../common'; const pimTheme: Theme = { diff --git a/front-packages/akeneo-design-system/src/theme/shared-catalogs/index.ts b/front-packages/akeneo-design-system/src/theme/shared-catalogs/index.ts index fb47f672c72e..40e2cfbd819c 100644 --- a/front-packages/akeneo-design-system/src/theme/shared-catalogs/index.ts +++ b/front-packages/akeneo-design-system/src/theme/shared-catalogs/index.ts @@ -1,4 +1,4 @@ -import {Theme} from '../theme'; +import type {Theme} from '../theme'; import {color, fontSize, palette, fontFamily} from '../common'; const sharedCatalogsTheme: Theme = { diff --git a/front-packages/akeneo-design-system/src/theme/theme.ts b/front-packages/akeneo-design-system/src/theme/theme.ts index 78c4c031ccaa..77a1601ab53f 100644 --- a/front-packages/akeneo-design-system/src/theme/theme.ts +++ b/front-packages/akeneo-design-system/src/theme/theme.ts @@ -91,12 +91,12 @@ type Level = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'; const getColor = (color: string, gradient?: number): ((props: AkeneoThemedProps) => string) => ({theme}: AkeneoThemedProps): string => - theme.color[`${color}${gradient ?? ''}`] as string; + theme.color[(`${color}${gradient ?? ''}`) as keyof Color] as string; const getColorForLevel = (level: Level, gradient: number): ((props: AkeneoThemedProps) => string) => ({theme}: AkeneoThemedProps): string => - theme.color[`${theme.palette[level]}${gradient}`] as string; + theme.color[(`${theme.palette[level]}${gradient}`) as keyof Color] as string; const getFontSize = (fontSize: keyof FontSize): ((props: AkeneoThemedProps) => string) => diff --git a/front-packages/akeneo-design-system/src/theme/themes.ts b/front-packages/akeneo-design-system/src/theme/themes.ts deleted file mode 100644 index 307583003ef4..000000000000 --- a/front-packages/akeneo-design-system/src/theme/themes.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {pimTheme} from './pim'; -import {onboarderTheme} from './onboarder'; -import {sharedCatalogsTheme} from './shared-catalogs'; -import {connectorTheme} from './connector'; - -const themes = [pimTheme, onboarderTheme, sharedCatalogsTheme, connectorTheme]; - -export {themes}; diff --git a/front-packages/akeneo-design-system/tsconfig.lib.json b/front-packages/akeneo-design-system/tsconfig.lib.json new file mode 100644 index 000000000000..4c5f6c25d4f8 --- /dev/null +++ b/front-packages/akeneo-design-system/tsconfig.lib.json @@ -0,0 +1,48 @@ +{ + "compilerOptions": { + "composite": true, + "allowJs": false, + "allowSyntheticDefaultImports": true, + "declaration": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "isolatedModules": true, + "jsx": "react", + "lib": ["es6", "dom"], + "module": "ESNext", + "moduleResolution": "node", + "noImplicitAny": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "outDir": "lib", + "rootDir": "src", + "skipLibCheck": true, + "sourceMap": true, + "strictBindCallApply": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "strictPropertyInitialization": true, + "removeComments": false, + "target": "ESNext", + "baseUrl": "./src", + "types": [ + "puppeteer", + "jest-environment-puppeteer", + "expect-puppeteer", + "node", + "jest", + "@testing-library/jest-dom" + ], + "incremental": true + }, + "include": ["src"], + "exclude": [ + "src/storybook/*", + "src/**/*.unit.ts", + "src/**/*.unit.tsx", + "src/**/*.visual.tsx", + "**/__mocks__/*" + ] +} diff --git a/front-packages/shared/.gitignore b/front-packages/shared/.gitignore index 6212ab0e14ef..c4662d57551c 100644 --- a/front-packages/shared/.gitignore +++ b/front-packages/shared/.gitignore @@ -1,4 +1,4 @@ coverage/ lib/ node_modules/ -tsconfig.tsbuildinfo +*.tsbuildinfo diff --git a/front-packages/shared/tsconfig.json b/front-packages/shared/tsconfig.json index 0f578795ae77..59821a9ad72d 100644 --- a/front-packages/shared/tsconfig.json +++ b/front-packages/shared/tsconfig.json @@ -23,7 +23,6 @@ "strictFunctionTypes": true, "strictNullChecks": true, "strictPropertyInitialization": true, - "suppressImplicitAnyIndexErrors": true, "removeComments": true, "target": "es5", "baseUrl": "./src", diff --git a/front-packages/shared/tsconfig.lib.json b/front-packages/shared/tsconfig.lib.json new file mode 100644 index 000000000000..5efc140999a0 --- /dev/null +++ b/front-packages/shared/tsconfig.lib.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "composite": true, + "module": "ESNext", + "target": "ESNext" + } +} diff --git a/frontend/build/check-requirements.js b/frontend/build/check-requirements.js index 61ae8651ba75..2d620989d12f 100644 --- a/frontend/build/check-requirements.js +++ b/frontend/build/check-requirements.js @@ -1,6 +1,6 @@ require('colors') const { existsSync } = require('fs') -const BUNDLE_REQUIRE_PATH = './public/js/require-paths.js' +const BUNDLE_REQUIRE_PATH = './public/js/require-paths.cjs' const ROUTES_PATH = './public/js/fos_js_routes.json' console.log('Checking PIM frontend requirements'.blue) diff --git a/frontend/build/compile-less.js b/frontend/build/compile-less.js index 016e2e7fd91e..039ae6a5c45a 100644 --- a/frontend/build/compile-less.js +++ b/frontend/build/compile-less.js @@ -10,7 +10,7 @@ const glob = require('glob') const RewriteImageURLs = require('./less-rewrite-urls') // The file that contains the paths of all required bundles of the PIM -const BUNDLE_REQUIRE_PATH = resolve(rootDir, './public/js/require-paths') +const BUNDLE_REQUIRE_PATH = resolve(rootDir, './public/js/require-paths.cjs') // The file path for each bundle that imports all the .less files const BUNDLE_LESS_INDEX_PATH = 'Resources/public/less/index.less' @@ -18,7 +18,7 @@ const BUNDLE_LESS_INDEX_PATH = 'Resources/public/less/index.less' // The final output path for all the CSS of the PIM const OUTPUT_CSS_PATH = 'public/css/pim.css' -if (!existsSync(`${BUNDLE_REQUIRE_PATH}.js`)) { +if (!existsSync(`${BUNDLE_REQUIRE_PATH}`)) { console.log(`${BUNDLE_REQUIRE_PATH} does not exist - Run "bin/console pim:installer:dump-require-paths" and try again.`.red) process.exit(1) } diff --git a/frontend/build/update-extensions.js b/frontend/build/update-extensions.js index bfb12e410225..aedda3c5f541 100644 --- a/frontend/build/update-extensions.js +++ b/frontend/build/update-extensions.js @@ -8,7 +8,7 @@ const deepmerge = require('deepmerge') console.log('Updating form extensions.json'.blue) -const BUNDLE_REQUIRE_PATH = resolve(rootDir, './public/js/require-paths') +const BUNDLE_REQUIRE_PATH = resolve(rootDir, './public/js/require-paths.cjs') const EXTENSIONS_JSON_PATH = 'public/js/extensions.json' const EXTENSION_DEFAULTS = { diff --git a/frontend/webpack/requirejs-utils.js b/frontend/webpack/requirejs-utils.js index 4416ef45c7bd..d6d4f0cf4ae4 100644 --- a/frontend/webpack/requirejs-utils.js +++ b/frontend/webpack/requirejs-utils.js @@ -70,7 +70,7 @@ const utils = { * @return {Object} An object requirejs containing module config and aliases */ getModulePaths(baseDir, sourceDir) { - const pathSourceFile = require(path.join(baseDir, 'public/js/require-paths.js')); + const pathSourceFile = require(path.join(baseDir, 'public/js/require-paths.cjs')); const { config, paths } = utils.getRequireConfig(pathSourceFile, baseDir); const aliases = Object.assign(getFrontModules(process.cwd(), './public/bundles')(), paths, { 'require-polyfill': path.resolve(sourceDir, './frontend/webpack/require-polyfill.js'), diff --git a/src/Akeneo/Platform/Bundle/InstallerBundle/Command/DumpRequirePathsCommand.php b/src/Akeneo/Platform/Bundle/InstallerBundle/Command/DumpRequirePathsCommand.php index 10f0c67e827d..a9ddfda0ed54 100644 --- a/src/Akeneo/Platform/Bundle/InstallerBundle/Command/DumpRequirePathsCommand.php +++ b/src/Akeneo/Platform/Bundle/InstallerBundle/Command/DumpRequirePathsCommand.php @@ -17,7 +17,7 @@ class DumpRequirePathsCommand extends Command { protected static $defaultName = 'pim:installer:dump-require-paths'; - const MAIN_CONFIG_FILE_NAME = 'js/require-paths.js'; + const MAIN_CONFIG_FILE_NAME = 'js/require-paths.cjs'; /** @var string */ private $rootDir;