Poc modernjs

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

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<BadgeProps & AkeneoThemedProps>`
   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<HTMLSpanElement, BadgeProps>(
+const Badge: React.FC<BadgeProps & {ref?: React.Ref<HTMLSpanElement>}> = React.forwardRef<HTMLSpanElement, BadgeProps>(
   ({level = 'primary', children, ...rest}: BadgeProps, forwardedRef: Ref<HTMLSpanElement>) => {
     return (
       <BadgeContainer level={level} ref={forwardedRef} {...rest}>

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<AkeneoThemedProps>`
   }
 `;
 
-const Block = React.forwardRef<HTMLButtonElement, BlockProps>(
+const Block: React.FC<BlockProps & {ref?: React.Ref<HTMLButtonElement>}> = React.forwardRef<HTMLButtonElement, BlockProps>(
   (
     {
       title,

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<HTMLButtonElement>,
@@ -110,7 +109,7 @@ const ActionsContainer = styled.div`
   align-items: center;
 `;
 
-const BlockButton = forwardRef<HTMLButtonElement, BlockButtonProps>(
+const BlockButton: React.FC<BlockButtonProps & {ref?: React.Ref<HTMLButtonElement>}> = React.forwardRef<HTMLButtonElement, BlockButtonProps>(
   (
     {icon, disabled = false, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, onClick, ...rest}: BlockButtonProps,
     forwardedRef: Ref<HTMLButtonElement>

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<HTMLButtonElement, ButtonProps>(
+const Button: React.FC<ButtonProps & {ref?: React.Ref<HTMLButtonElement>}> = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       level = 'primary',

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<HTMLButtonElement, CardProps>(
+const CardComponent: React.FC<CardProps & {ref?: React.Ref<HTMLButtonElement>}> = React.forwardRef<HTMLButtonElement, CardProps>(
   (
     {
       src,

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<HTMLDivElement, CheckboxProps>(
+const Checkbox: React.FC<CheckboxProps & {ref?: React.Ref<HTMLDivElement>}> = React.forwardRef<HTMLDivElement, CheckboxProps>(
   (
     {
       checked = false,

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<HTMLDivElement, CollapseProps>(
+const Collapse: React.FC<CollapseProps & {ref?: React.Ref<HTMLDivElement>}> = React.forwardRef<HTMLDivElement, CollapseProps>(
   (
     {label, collapseButtonLabel, isOpen, onCollapse, children, ...rest}: CollapseProps,
     forwardedRef: Ref<HTMLDivElement>

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,
     });
   });

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(

front-packages/akeneo-design-system/src/components/Dropdown/Header/Header.tsx

@@ -27,7 +27,7 @@ type HeaderProps = Override<
   }
 >;
 
-const Header = React.forwardRef<HTMLDivElement, HeaderProps>(
+const Header: React.FC<HeaderProps & {ref?: React.Ref<HTMLDivElement>}> = React.forwardRef<HTMLDivElement, HeaderProps>(
   ({children}: HeaderProps, forwardedRef: Ref<HTMLDivElement>): React.ReactElement => {
     return <HeaderContainer ref={forwardedRef}>{children}</HeaderContainer>;
   }

front-packages/akeneo-design-system/src/components/Dropdown/Header/Title.tsx

@@ -22,7 +22,7 @@ type TitleProps = Override<
   }
 >;
 
-const Title = React.forwardRef<HTMLDivElement, TitleProps>(
+const Title: React.FC<TitleProps & {ref?: React.Ref<HTMLDivElement>}> = React.forwardRef<HTMLDivElement, TitleProps>(
   ({children}: TitleProps, forwardedRef: Ref<HTMLDivElement>): React.ReactElement => {
     return <TitleContainer ref={forwardedRef}>{children}</TitleContainer>;
   }

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<HTMLDivElement, ItemProps>(
+const Item: React.FC<ItemProps & {ref?: React.Ref<HTMLDivElement>}> = React.forwardRef<HTMLDivElement, ItemProps>(
   (
     {children, onKeyDown, disabled = false, isActive = false, onClick, title, ...rest}: ItemProps,
     forwardedRef: Ref<HTMLDivElement>
@@ -145,7 +145,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
       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<HTMLDivElement, ItemProps>(
         return (
           <>
             <ItemLabel>
-              {React.cloneElement(child, {
+              {React.cloneElement(child as any, {
                 ref: actionableRef,
                 decorated: false,
                 disabled,
@@ -170,7 +170,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
 
       // 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,

front-packages/akeneo-design-system/src/components/Dropdown/ItemCollection/ItemCollection.tsx

@@ -54,7 +54,7 @@ type ItemCollectionProps = Override<
   }
 >;
 
-const ItemCollection = React.forwardRef<HTMLDivElement, ItemCollectionProps>(
+const ItemCollection: React.FC<ItemCollectionProps & {ref?: React.Ref<HTMLDivElement>}> = React.forwardRef<HTMLDivElement, ItemCollectionProps>(
   ({children, onNextPage, noResultTitle, noResultIllustration, ...rest}: ItemCollectionProps, forwardedRef) => {
     const firstItemRef = useRef<HTMLDivElement>(null);
     const lastItemRef = useRef<HTMLDivElement>(null);
@@ -77,7 +77,7 @@ const ItemCollection = React.forwardRef<HTMLDivElement, ItemCollectionProps>(
 
     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,
         });

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<SurtitleProps> = ({label, children, ...rest}) => (
   <SurtitleContainer {...rest}>

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<HTMLDivElement, FieldProps>(
+const Field: React.FC<FieldProps & { ref?: React.Ref<HTMLDivElement> }> = React.forwardRef<HTMLDivElement, FieldProps>(
   (
     {
       label,
@@ -96,7 +101,7 @@ const Field = React.forwardRef<HTMLDivElement, FieldProps>(
       actions,
       ...rest
     }: FieldProps,
-    forwardedRef: Ref<HTMLDivElement>
+    forwardedRef: Ref<HTMLDivElement>,
   ) => {
     const inputId = useId('input_');
     const labelId = useId('label_');
@@ -116,7 +121,7 @@ const Field = React.forwardRef<HTMLDivElement, FieldProps>(
     return (
       <FieldContainer ref={forwardedRef} fullWidth={fullWidth ?? false} {...rest}>
         <LabelContainer>
-          {incomplete && <Pill level="warning" />}
+          {incomplete && <Pill level="warning"/>}
           <Label htmlFor={inputId} id={labelId}>
             {label}
             {requiredLabel && (
@@ -126,13 +131,13 @@ const Field = React.forwardRef<HTMLDivElement, FieldProps>(
             )}
           </Label>
           {channel && <Channel>{channel}</Channel>}
-          {locale && ('string' === typeof locale ? <Locale code={locale} /> : locale)}
+          {locale && ('string' === typeof locale ? <Locale code={locale}/> : locale)}
           {actions}
         </LabelContainer>
         {decoratedChildren}
       </FieldContainer>
     );
-  }
+  },
 );
 
 export {Field};

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<HTMLDivElement, HelperProps>(
+const Helper: React.FC<HelperProps & {ref?: React.Ref<HTMLDivElement>}> = React.forwardRef<HTMLDivElement, HelperProps>(
   ({level = 'info', inline = false, icon, children, ...rest}: HelperProps, forwardedRef: Ref<HTMLDivElement>) => {
     return (
       <Container ref={forwardedRef} level={level} inline={inline} {...rest}>

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<HTMLButtonElement, IconButtonProps>(
+const IconButton: React.FC<IconButtonProps & {ref?: React.Ref<HTMLButtonElement>}> = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   ({icon, size = 'default', ghost, ...rest}: IconButtonProps, forwardedRef: Ref<HTMLButtonElement>) => {
     return (
       <IconButtonContainer

front-packages/akeneo-design-system/src/components/IconCard/IconCard.tsx

@@ -1,7 +1,7 @@
 import React, {HTMLAttributes, isValidElement, ReactElement, Ref} from 'react';
 import styled, {css} from 'styled-components';
 import {AkeneoThemedProps, getColor, getFontSize} from '../../theme';
-import {IconProps} from '../../icons';
+import type {IconProps} from '../../icons/IconProps';
 import {Override} from '../../shared';
 
 const Container = styled.div<{disabled: boolean; onClick: () => void} & AkeneoThemedProps>`
@@ -112,7 +112,7 @@ type IconCardProps = Override<
   }
 >;
 
-const IconCard = React.forwardRef<HTMLDivElement, IconCardProps>(
+const IconCard: React.FC<IconCardProps & {ref?: React.Ref<HTMLDivElement>}> = React.forwardRef<HTMLDivElement, IconCardProps>(
   ({icon, label, content, onClick, disabled = false, ...rest}: IconCardProps, forwardedRef: Ref<HTMLDivElement>) => {
     const validIcon = isValidElement<IconProps>(icon) && React.cloneElement(icon, {size: 30});
 

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<HTMLImageElement, ImageProps>(
+const Image: React.FC<ImageProps & {ref?: React.Ref<HTMLImageElement>}> = React.forwardRef<HTMLImageElement, ImageProps>(
   ({fit = 'cover', isStacked = false, src, ...rest}: ImageProps, forwardedRef: Ref<HTMLImageElement>) => {
     return (
       <ImageContainer

front-packages/akeneo-design-system/src/components/Information/Information.tsx

@@ -50,7 +50,7 @@ type InformationProps = {
 };
 
 /** Information informs the user about the page's features */
-const Information = React.forwardRef<HTMLDivElement, InformationProps>(
+const Information: React.FC<InformationProps & {ref?: React.Ref<HTMLDivElement>}> = React.forwardRef<HTMLDivElement, InformationProps>(
   ({illustration, title, children, ...rest}: InformationProps, forwardedRef: Ref<HTMLDivElement>) => {
     const resizedIllustration =
       isValidElement<IllustrationProps>(illustration) && React.cloneElement(illustration, {size: 80});