@groupeactual/ui-kit 1.7.9 → 2.0.0-beta.0

package/src/components/Form/TextField/TextField.tsx

@@ -2,26 +2,27 @@ import React, {
   FocusEventHandler,
   ReactNode,
   useEffect,
+  useId,
   useMemo,
   useState,
 } from 'react';
 
 import { faEye, faEyeSlash } from '@fortawesome/pro-solid-svg-icons';
-import { TextFieldStyle } from '@groupeactual/design-tokens';
 import {
-  TextField as MuiTextField,
-  TextFieldProps,
-  styled,
-  useTheme,
+  Box,
+  FormHelperText,
+  InputLabel,
+  OutlinedInput,
+  OutlinedInputProps,
 } from '@mui/material';
 
-import Icon from '@/components/IconProvider';
+import IconProvider from '@/components/IconProvider';
 
-interface Props extends Omit<TextFieldProps, 'error'> {
-  error?: string;
-  label?: string;
+interface Props extends Omit<OutlinedInputProps, 'error'> {
+  label?: ReactNode;
   value?: string | unknown;
   name?: string;
+  error?: string;
   placeholder?: string;
   disabled?: boolean;
   endAdornment?: ReactNode;
@@ -29,6 +30,7 @@ interface Props extends Omit<TextFieldProps, 'error'> {
   width?: number | string;
   className?: string;
   focused?: boolean;
+  helperText?: string;
   onClick?: (_e: React.MouseEvent<HTMLInputElement>) => void;
   onBlur?: FocusEventHandler<unknown>;
   onChange?: (
@@ -36,7 +38,10 @@ interface Props extends Omit<TextFieldProps, 'error'> {
   ) => void;
 }
 
-const TextField = React.forwardRef<HTMLDivElement, Props>(
+const TextField = React.forwardRef<
+  HTMLInputElement | HTMLTextAreaElement,
+  Props
+>(
   (
     {
       name,
@@ -51,16 +56,13 @@ const TextField = React.forwardRef<HTMLDivElement, Props>(
       placeholder = '',
       maxLength,
       focused,
+      helperText,
       ...props
     },
     ref,
   ) => {
-    const theme = useTheme();
-    const StyledTextField = useMemo(
-      () => styled(MuiTextField)(TextFieldStyle(theme)),
-      [theme],
-    );
-
+    const generatedId = useId();
+    const inputId = name || `textfield-${generatedId}`;
     const [showPassword, setShowPassword] = useState(false);
     const [currentType, setCurrentType] = useState<string>(
       props.type ?? 'text',
@@ -68,84 +70,131 @@ const TextField = React.forwardRef<HTMLDivElement, Props>(
 
     const passwordEndAdornment: React.ReactNode = useMemo(() => {
       return (
-        <Icon
-          className="DsTextField-passwordIcon"
-          icon={showPassword ? faEyeSlash : faEye}
-          color="blueClickable"
-          onClick={() => setShowPassword(!showPassword)}
-        />
+        <Box
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            marginRight: '13px',
+            cursor: 'pointer',
+          }}
+        >
+          <IconProvider
+            className="DsTextField-passwordIcon"
+            icon={showPassword ? faEyeSlash : faEye}
+            color="blueClickable"
+            onClick={() => setShowPassword(!showPassword)}
+          />
+        </Box>
       );
     }, [showPassword]);
 
-    useEffect(() => {
-      if (showPassword) {
-        setCurrentType('text');
-      } else {
-        setCurrentType(props.type ?? 'text');
-      }
-    }, [showPassword]);
+    const hasError = useMemo(
+      () =>
+        Boolean(
+          (error && error?.length > 0) ||
+            (maxLength && String(value).length > maxLength),
+        ),
+      [error, maxLength, value],
+    );
 
     const getTextFieldClassName = useMemo(() => {
       const classNames = [
-        (!placeholder && 'TextField-mui') || 'TextField-ds',
         props.color === 'success' && 'Mui-success',
         value && 'Mui-filled',
         props.className,
       ];
 
       return classNames.filter(Boolean).join(' ');
-    }, [value, props.color]);
+    }, [value, props.color, props.className]);
 
-    const hasError = useMemo(
-      () =>
-        Boolean(
-          (error && error?.length > 0) ||
-            (maxLength && String(value).length > maxLength),
-        ),
-      [error, maxLength, value],
-    );
+    const getLabelAndPlaceholderClassName = useMemo(() => {
+      const classNames = [
+        props.color === 'success' && 'Mui-success',
+        (error || hasError) && 'Mui-error',
+      ];
+
+      return classNames.filter(Boolean).join(' ');
+    }, [props.color, hasError]);
+
+    useEffect(() => {
+      if (showPassword) {
+        setCurrentType('text');
+      } else {
+        setCurrentType(props.type ?? 'text');
+      }
+    }, [showPassword]);
 
     return (
-      <StyledTextField
-        variant="outlined"
-        name={name}
-        ref={ref}
-        label={label}
-        value={value}
-        sx={{ width }}
-        placeholder={placeholder}
-        focused={focused}
-        FormHelperTextProps={{ component: 'div' } as never}
-        InputLabelProps={{
-          shrink: (placeholder && true) || undefined,
-        }}
-        onClick={(e) => e.stopPropagation()}
-        onChange={(e) => {
-          onChange?.(e);
-        }}
-        onBlur={(e) => {
-          onBlur?.(e);
-        }}
-        error={hasError}
-        disabled={disabled}
-        InputProps={
-          props.type === 'password'
-            ? { endAdornment: passwordEndAdornment }
-            : { endAdornment }
-        }
-        {...props}
-        className={getTextFieldClassName}
-        type={currentType}
-        helperText={
-          <div style={{ display: 'table', width: '100%', marginRight: '4px' }}>
-            {(error || props.helperText) && (
+      <Box data-testid="ds-text-field-container">
+        {label && (
+          <InputLabel
+            className={getLabelAndPlaceholderClassName}
+            disabled={disabled}
+            htmlFor={inputId}
+            data-testid="ds-text-field-label"
+          >
+            {label}
+          </InputLabel>
+        )}
+        <OutlinedInput
+          {...props}
+          name={name}
+          id={inputId}
+          ref={ref}
+          value={value}
+          sx={{ width }}
+          placeholder={placeholder}
+          autoFocus={focused}
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => {
+            onChange?.(e);
+          }}
+          onBlur={(e) => {
+            onBlur?.(e);
+          }}
+          error={hasError}
+          disabled={disabled}
+          endAdornment={
+            props.type === 'password' ? (
+              passwordEndAdornment
+            ) : (
+              <Box
+                sx={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  marginRight: '13px',
+                }}
+                data-testid="ds-end-adornment"
+              >
+                {endAdornment}
+              </Box>
+            )
+          }
+          margin="none"
+          className={getTextFieldClassName}
+          type={currentType}
+          data-testid="ds-outlined-input"
+        />
+        {(error || helperText || maxLength) && (
+          <FormHelperText
+            component="span"
+            className={getLabelAndPlaceholderClassName}
+            sx={{
+              display: 'table',
+              width: '100%',
+              marginRight: '4px',
+              marginTop: '4px',
+            }}
+            data-testid="ds-form-helper-text"
+          >
+            {(error || helperText) && (
               <div
                 style={{
                   display: maxLength ? 'table-cell' : '',
                   float: 'left',
                 }}
               >
-                {error || props.helperText}
+                {error || helperText}
               </div>
             )}
             {maxLength && (
@@ -153,9 +202,9 @@ const TextField = React.forwardRef<HTMLDivElement, Props>(
                 {String(value).length}/{maxLength} caract.
               </div>
             )}
-          </div>
-        }
-      />
+          </FormHelperText>
+        )}
+      </Box>
     );
   },
 );

package/src/components/Form/TimePicker/TimePicker.tsx

@@ -1,4 +1,10 @@
-import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
+import React, {
+  MouseEventHandler,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { faCheck, faClock } from '@fortawesome/pro-regular-svg-icons';
 import { Popover, PopoverProps, TextFieldProps } from '@mui/material';
@@ -10,11 +16,21 @@ import dayjs, { Dayjs } from 'dayjs';
 import TextField from '@/components/Form/TextField';
 import IconProvider from '@/components/IconProvider';
 
-interface Props extends Omit<TextFieldProps, 'error' | 'onChange'> {
+interface Props
+  extends Omit<
+    TextFieldProps,
+    | 'error'
+    | 'onChange'
+    | 'margin'
+    | 'onInvalid'
+    | 'onKeyDown'
+    | 'onKeyUp'
+    | 'slotProps'
+  > {
   value: Dayjs | undefined;
   onChange?: (_time: string | Dayjs | undefined) => void;
   onTouched?: () => void;
-  label?: string;
+  label?: ReactNode;
   helperText?: string;
   minTime?: Dayjs;
   maxTime?: Dayjs;
@@ -56,7 +72,7 @@ const TimePicker = ({
   const [textfieldWidth, setTextfieldWidth] = useState<number | undefined>(
     undefined,
   );
-  const textFieldRef = useRef<HTMLDivElement>(null); // Reference for the TextField
+  const textFieldRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null); // Reference for the TextField
 
   const isOpen = Boolean(anchorEl);
 
@@ -132,7 +148,7 @@ const TimePicker = ({
       <TextField
         {...props}
         ref={textFieldRef}
-        data-testid="select-hour"
+        data-testid="ds-select-hour"
         error={customError || error}
         label={label}
         helperText={customError ?? helperText}
@@ -153,22 +169,25 @@ const TimePicker = ({
               }}
               icon={faCheck}
               color="greenSuccess"
+              data-testid="ds-icon-success"
             />
           ) : (
             <IconProvider
               onClick={handleClick}
+              color={disabled ? 'text.disabled' : 'primary.main'}
               sx={{
                 ':hover': {
                   cursor: disabled ? 'auto' : 'pointer',
                 },
               }}
               icon={faClock}
+              data-testid="ds-icon-clock"
             />
           )
         }
       />
       <Popover
-        data-testid="select-hour_popover"
+        data-testid="ds-select-hour-popover"
         open={isOpen}
         anchorEl={anchorEl}
         onClose={handleClose}
@@ -201,7 +220,7 @@ const TimePicker = ({
           }
         >
           <DigitalClock
-            data-testid="select-hour_digital_clock"
+            data-testid="ds-select-hour-digital-clock"
             timeStep={timeStep}
             value={value && typeof value === 'object' ? value : null}
             onChange={(time) => {

package/src/components/IconButton/IconButton.tsx

@@ -1,14 +1,12 @@
-import React, { MouseEventHandler, useMemo } from 'react';
+import React, { MouseEventHandler } from 'react';
 
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { IconButtonStyle } from '@groupeactual/design-tokens';
 import {
+  CircularProgress,
   IconButton as IconButtonMUI,
   IconButtonProps,
   SxProps,
   Theme,
-  styled,
-  useTheme,
 } from '@mui/material';
 
 import IconProvider from '@/components/IconProvider';
@@ -17,49 +15,76 @@ import { Placement } from '@/components/Tooltip/tooltip.interface';
 
 interface Props extends Omit<IconButtonProps, 'color'> {
   icon: IconDefinition;
-  variant?: 'default' | 'table';
+  variant?: 'plain' | 'outlined';
   positionGroup?: 'left' | 'middle' | 'right';
   tooltipText?: string;
   tooltipPosition?: Placement;
   size?: 'small' | 'medium';
   sx?: SxProps<Theme>;
-  color?: string;
+  color?: 'neutral' | 'success' | 'warning' | 'danger';
   onClick?: MouseEventHandler | undefined;
 }
 
-const IconButton = ({
-  icon,
-  variant = 'default',
-  positionGroup,
-  tooltipText = '',
-  tooltipPosition = 'top',
-  size = 'medium',
-  color,
-  onClick,
-  ...iconButtonProps
-}: Props) => {
-  const theme = useTheme();
-  const StyledIconButton = useMemo(
-    () => styled(IconButtonMUI)(IconButtonStyle(theme)),
-    [theme],
-  );
-  return (
-    <Tooltip title={tooltipText} placement={tooltipPosition}>
-      <StyledIconButton
-        className={`IconButtonVariant-${variant} IconButtonSize-${size} ${
-          positionGroup ? `IconButtonPositionGroup-${positionGroup}` : ''
-        } `}
-        onClick={onClick}
-        {...iconButtonProps}
-      >
-        <IconProvider
-          color={color}
-          icon={icon}
-          size={size === 'small' ? 'sm' : 'md'}
-        />
-      </StyledIconButton>
-    </Tooltip>
-  );
+const getColor = (
+  color: Props['color'],
+): 'primary' | 'success' | 'warning' | 'error' | undefined => {
+  switch (color) {
+    case 'danger':
+      return 'error';
+    case 'neutral':
+      return 'primary';
+    default:
+      return color;
+  }
 };
 
+const IconButton = React.forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      icon,
+      variant = 'outlined',
+      positionGroup,
+      tooltipText = '',
+      tooltipPosition = 'top',
+      size = 'medium',
+      color = 'neutral',
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <Tooltip title={tooltipText} placement={tooltipPosition}>
+        <IconButtonMUI
+          onClick={onClick}
+          ref={ref}
+          {...props}
+          color={getColor(color)}
+          loadingIndicator={
+            <CircularProgress color={getColor(color)} size={14} thickness={4} />
+          }
+          className={`IconButtonVariant-${variant} IconButtonSize-${size} ${
+            positionGroup ? `IconButtonPositionGroup-${positionGroup}` : ''
+          } `}
+          data-testid="ds-icon-button"
+        >
+          {!props.loading && (
+            <>
+              <IconProvider
+                icon={icon}
+                size={size === 'small' ? 'sm' : 'md'}
+                color="inherit"
+                data-testid="ds-icon-provider"
+              />
+              {props.children}
+            </>
+          )}
+        </IconButtonMUI>
+      </Tooltip>
+    );
+  },
+);
+
+IconButton.displayName = 'IconButton';
+
 export default IconButton;

package/src/components/IconProvider/IconProvider.tsx

@@ -33,7 +33,6 @@ interface FontAwesomeSvgIconProps {
   fontSize: number | undefined;
 }
 
-// eslint-disable-next-line react/display-name
 const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
   ({ icon, fontSize }, ref) => {
     const {
@@ -67,80 +66,102 @@ const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
   },
 );
 
-const IconProvider = ({
-  variant = 'none',
-  icon,
-  color = '#136cac', // blueClickable
-  size = 16,
-  sx,
-  ...props
-}: Props & BoxProps): JSX.Element => {
-  const theme = useTheme();
+FontAwesomeSvgIcon.displayName = 'FontAwesomeSvgIcon';
 
-  const usedColor = useMemo(() => {
-    if (theme.palette[color]) {
-      return theme.palette[color];
-    } else {
-      if (!color || color.length === 0) {
-        return '#136cac';
+const IconProvider = React.forwardRef<HTMLDivElement, Props & BoxProps>(
+  (
+    {
+      variant = 'none',
+      icon,
+      color = '#136cac', // blueClickable
+      size = 16,
+      sx,
+      ...props
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+
+    console.log('theme.palette', theme.palette);
+    const usedColor = useMemo(() => {
+      if (theme.palette[color]) {
+        return theme.palette[color];
       } else {
-        return color;
+        if (!color || color.length === 0) {
+          return '#136cac';
+        } else {
+          return color;
+        }
       }
-    }
-  }, [theme.palette, color]);
+    }, [theme.palette, color]);
+    console.log('usedColor', usedColor);
 
-  const getStyles = (): SxProps<Theme> => {
-    switch (variant) {
-      case 'square':
-        return {
-          ...sx,
-          color: usedColor,
-          backgroundColor: `${usedColor}14`,
-          borderRadius: '4px',
-          borderColor: '1px solid ' + usedColor,
-          overflow: 'visible',
-          padding: '10px',
-          width: '36px',
-          height: '36px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        };
-      default:
-        return {
-          ...sx,
-          color: usedColor,
-          width: usedFontSize,
-          height: usedFontSize,
-          lineHeight: usedFontSize + 'px',
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        };
-    }
-  };
+    const getStyles = (): SxProps<Theme> => {
+      switch (variant) {
+        case 'square':
+          return {
+            ...sx,
+            color: usedColor + ' !important',
+            backgroundColor: `${usedColor}14 !important`,
+            borderRadius: '4px',
+            borderColor: '1px solid ' + usedColor,
+            overflow: 'visible',
+            padding: '10px',
+            width: '36px',
+            height: '36px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          };
+        default:
+          return {
+            ...sx,
+            color: usedColor + ' !important',
+            width: usedFontSize,
+            height: usedFontSize,
+            lineHeight: usedFontSize + 'px',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          };
+      }
+    };
 
-  const isKey = (key: PropertyKey): key is keyof typeof FontSizes => {
-    return key in FontSizes;
-  };
+    const isKey = (key: PropertyKey): key is keyof typeof FontSizes => {
+      return key in FontSizes;
+    };
 
-  const usedFontSize = useMemo(() => {
-    if (variant === 'square') {
-      return 16;
-    } else if (isKey(size)) {
-      return FontSizes[size];
-    } else if (size >= 0) {
-      return size;
-    } else {
-      return 16;
-    }
-  }, [variant, size]);
+    const usedFontSize = useMemo(() => {
+      if (variant === 'square') {
+        return 16;
+      } else if (isKey(size)) {
+        return FontSizes[size];
+      } else if (size >= 0) {
+        return size;
+      } else {
+        return 16;
+      }
+    }, [variant, size]);
 
-  return (
-    <Box className="itemIcon" component="span" sx={getStyles()} {...props}>
-      <FontAwesomeSvgIcon icon={icon} fontSize={usedFontSize} />
-    </Box>
-  );
-};
+    return (
+      <Box
+        {...props}
+        ref={ref}
+        className={`itemIcon ${props.className ?? ''}`}
+        component="span"
+        sx={getStyles()}
+        data-testid="ds-icon-provider"
+      >
+        <FontAwesomeSvgIcon
+          icon={icon}
+          fontSize={usedFontSize}
+          data-testid="ds-font-awesome-icon"
+        />
+      </Box>
+    );
+  },
+);
+
+IconProvider.displayName = 'IconProvider';
 
 export default IconProvider;