@groupeactual/ui-kit 1.6.7-beta.0 → 1.7.0-beta.3

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

@@ -15,11 +15,11 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Icon from '../../IconProvider';
+import Icon from '@/components/IconProvider';
 
 interface Props extends Omit<TextFieldProps, 'error'> {
   error?: string;
-  label: string;
+  label?: string;
   value?: string | unknown;
   name?: string;
   placeholder?: string;
@@ -28,124 +28,137 @@ interface Props extends Omit<TextFieldProps, 'error'> {
   maxLength?: number;
   width?: number | string;
   className?: string;
+  focused?: boolean;
+  onClick?: (_e: React.MouseEvent<HTMLInputElement>) => void;
   onBlur?: FocusEventHandler<unknown>;
   onChange?: (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    _e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => void;
 }
-const TextField = ({
-  name,
-  value,
-  error,
-  onBlur,
-  onChange,
-  label,
-  disabled,
-  width = '100%',
-  endAdornment,
-  placeholder = '',
-  maxLength,
-  ...props
-}: Props) => {
-  const theme = useTheme();
-  const StyledTextField = useMemo(
-    () => styled(MuiTextField)(TextFieldStyle(theme)),
-    [theme],
-  );
 
-  const [showPassword, setShowPassword] = useState(false);
-  const [currentType, setCurrentType] = useState<string>(props.type ?? 'text');
+const TextField = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      name,
+      value,
+      error,
+      onBlur,
+      onChange,
+      label = '',
+      disabled,
+      width = '100%',
+      endAdornment,
+      placeholder = '',
+      maxLength,
+      focused,
+      ...props
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+    const StyledTextField = useMemo(
+      () => styled(MuiTextField)(TextFieldStyle(theme)),
+      [theme],
+    );
 
-  const passwordEndAdornment: React.ReactNode = useMemo(() => {
-    return (
-      <Icon
-        className="DsTextField-passwordIcon"
-        icon={showPassword ? faEyeSlash : faEye}
-        color="blueClickable"
-        onClick={() => setShowPassword(!showPassword)}
-      />
+    const [showPassword, setShowPassword] = useState(false);
+    const [currentType, setCurrentType] = useState<string>(
+      props.type ?? 'text',
     );
-  }, [showPassword]);
 
-  useEffect(() => {
-    if (showPassword) {
-      setCurrentType('text');
-    } else {
-      setCurrentType(props.type ?? 'text');
-    }
-  }, [showPassword]);
+    const passwordEndAdornment: React.ReactNode = useMemo(() => {
+      return (
+        <Icon
+          className="DsTextField-passwordIcon"
+          icon={showPassword ? faEyeSlash : faEye}
+          color="blueClickable"
+          onClick={() => setShowPassword(!showPassword)}
+        />
+      );
+    }, [showPassword]);
 
-  const getTextFieldClassName = useMemo(() => {
-    const classNames = [
-      (!placeholder && 'TextField-mui') || 'TextField-ds',
-      props.color === 'success' && 'Mui-success',
-      value && 'Mui-filled',
-      props.className,
-    ];
+    useEffect(() => {
+      if (showPassword) {
+        setCurrentType('text');
+      } else {
+        setCurrentType(props.type ?? 'text');
+      }
+    }, [showPassword]);
 
-    return classNames.filter(Boolean).join(' ');
-  }, [value]);
+    const getTextFieldClassName = useMemo(() => {
+      const classNames = [
+        (!placeholder && 'TextField-mui') || 'TextField-ds',
+        props.color === 'success' && 'Mui-success',
+        value && 'Mui-filled',
+        props.className,
+      ];
 
-  const hasError = useMemo(
-    () =>
-      Boolean(
-        (error && error?.length > 0) ||
-          (maxLength && String(value).length > maxLength),
-      ),
-    [error, maxLength, value],
-  );
+      return classNames.filter(Boolean).join(' ');
+    }, [value]);
 
-  return (
-    <StyledTextField
-      variant="outlined"
-      name={name}
-      label={label}
-      value={value}
-      sx={{ width }}
-      placeholder={placeholder}
-      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) && (
-            <div
-              style={{
-                display: maxLength ? 'table-cell' : '',
-                float: 'left',
-              }}
-            >
-              {error || props.helperText}
-            </div>
-          )}
-          {maxLength && (
-            <div style={{ display: 'table-cell', float: 'right' }}>
-              {String(value).length}/{maxLength} caract.
-            </div>
-          )}
-        </div>
-      }
-    />
-  );
-};
+    const hasError = useMemo(
+      () =>
+        Boolean(
+          (error && error?.length > 0) ||
+            (maxLength && String(value).length > maxLength),
+        ),
+      [error, maxLength, value],
+    );
+
+    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) && (
+              <div
+                style={{
+                  display: maxLength ? 'table-cell' : '',
+                  float: 'left',
+                }}
+              >
+                {error || props.helperText}
+              </div>
+            )}
+            {maxLength && (
+              <div style={{ display: 'table-cell', float: 'right' }}>
+                {String(value).length}/{maxLength} caract.
+              </div>
+            )}
+          </div>
+        }
+      />
+    );
+  },
+);
 
 TextField.displayName = 'TextField';
 

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

@@ -0,0 +1,228 @@
+import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
+
+import { faCheck, faClock } from '@fortawesome/pro-regular-svg-icons';
+import { Popover, PopoverProps, TextFieldProps } from '@mui/material';
+import { DigitalClock, LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { enUS, frFR } from '@mui/x-date-pickers/locales';
+import dayjs, { Dayjs } from 'dayjs';
+
+import TextField from '@/components/Form/TextField';
+import IconProvider from '@/components/IconProvider';
+
+interface Props extends Omit<TextFieldProps, 'error' | 'onChange'> {
+  value: Dayjs | undefined;
+  onChange?: (_time: string | Dayjs | undefined) => void;
+  onTouched?: () => void;
+  label?: string;
+  helperText?: string;
+  minTime?: Dayjs;
+  maxTime?: Dayjs;
+  timeStep?: number;
+  error?: string;
+  disabled?: boolean;
+  width?: string | number;
+  locale?: 'fr' | 'en';
+  color?: 'success';
+}
+
+const TimePicker = ({
+  value,
+  label = '',
+  helperText = '',
+  error,
+  disabled = false,
+  minTime = dayjs().hour(8).minute(0),
+  maxTime = dayjs().hour(19).minute(0),
+  timeStep = 15,
+  locale = 'fr',
+  width,
+  color,
+  onTouched,
+  onChange,
+  ...props
+}: Props) => {
+  const [customError, setCustomError] = useState<string | null>(null);
+  const [textHour, setTextHour] = useState<string>(
+    value && typeof value !== 'string' ? value.format('HH:mm') : '',
+  );
+  const [displayedMinTime, setDisplayedMinTime] = useState<Dayjs | undefined>(
+    undefined,
+  );
+  const [anchorEl, setAnchorEl] = useState<PopoverProps['anchorEl'] | null>(
+    null,
+  );
+  const [textHourFixed, setTextHourFixed] = useState<boolean>(false);
+  const [textfieldWidth, setTextfieldWidth] = useState<number | undefined>(
+    undefined,
+  );
+  const textFieldRef = useRef<HTMLDivElement>(null); // Reference for the TextField
+
+  const isOpen = Boolean(anchorEl);
+
+  const handleClick: MouseEventHandler = (_event: React.MouseEvent) => {
+    if (disabled) return;
+    if (textHour === '') setTextHour('HH:mm');
+    setAnchorEl(textFieldRef.current);
+  };
+
+  const handleClose = () => {
+    onTouched?.();
+    setAnchorEl(null);
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    if (/H/.test(e.target.value) || e.target.value === '' || !e.target.value) {
+      setTextHour('');
+      setCustomError(null);
+      onChange?.(undefined);
+    } else {
+      const inputValue = e.target.value;
+      const numericValue = inputValue.replace(/[^\d]/g, '');
+      const formattedValue =
+        numericValue.slice(0, 2) +
+        (numericValue.length > 2 ? ':' + numericValue.slice(2) : '');
+
+      if (formattedValue !== '') {
+        setTextHour(formattedValue);
+      } else {
+        setTextHour('');
+      }
+
+      const dayjsTime = dayjs(inputValue, 'HH:mm', true);
+      const isValidTime = dayjsTime.isValid();
+      if (!isValidTime) {
+        if (!e.target?.value || e.target.value === 'HH:mm') {
+          setCustomError(null);
+          return;
+        }
+        setCustomError(error || '');
+        onChange?.(e.target.value);
+        return;
+      }
+      setCustomError(null);
+      onChange?.(dayjsTime);
+    }
+  };
+
+  useEffect(() => {
+    if (minTime && !displayedMinTime) {
+      setDisplayedMinTime(minTime.subtract(timeStep, 'minute'));
+    }
+  }, [minTime]);
+
+  useEffect(() => {
+    if (!value || textHour || textHourFixed) return;
+    setTextHourFixed(true);
+    setTextHour(
+      value && typeof value !== 'string' ? value?.format('HH:mm') : '',
+    );
+  }, [value]);
+
+  useEffect(() => {
+    if (textFieldRef.current) {
+      setTextfieldWidth(textFieldRef.current.offsetWidth);
+    }
+  }, [textFieldRef.current, textHour]);
+
+  return (
+    <>
+      <TextField
+        {...props}
+        ref={textFieldRef}
+        data-testid="select-hour"
+        fullWidth
+        error={customError || error}
+        label={label}
+        helperText={customError ?? helperText}
+        onChange={handleChange}
+        focused={isOpen}
+        value={textHour}
+        disabled={disabled}
+        width={width}
+        color={color}
+        endAdornment={
+          color === 'success' ? (
+            <IconProvider
+              onClick={handleClick}
+              sx={{
+                ':hover': {
+                  cursor: disabled ? 'auto' : 'pointer',
+                },
+              }}
+              icon={faCheck}
+              color="greenSuccess"
+            />
+          ) : (
+            <IconProvider
+              onClick={handleClick}
+              sx={{
+                ':hover': {
+                  cursor: disabled ? 'auto' : 'pointer',
+                },
+              }}
+              icon={faClock}
+            />
+          )
+        }
+      />
+      <Popover
+        data-testid="select-hour_popover"
+        open={isOpen}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        slotProps={{
+          paper: {
+            sx: {
+              boxShadow: '0px 2px 10px 0px #2727271F',
+            },
+          },
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        sx={{
+          marginTop: helperText !== '' ? '-20px' : '0px',
+        }}
+      >
+        <LocalizationProvider
+          dateAdapter={AdapterDayjs}
+          adapterLocale={locale}
+          localeText={
+            locale == 'fr'
+              ? frFR.components.MuiLocalizationProvider.defaultProps.localeText
+              : enUS.components.MuiLocalizationProvider.defaultProps.localeText
+          }
+        >
+          <DigitalClock
+            data-testid="select-hour_digital_clock"
+            timeStep={timeStep}
+            value={value && typeof value === 'object' ? value : null}
+            onChange={(time) => {
+              setTextHour(time ? time.format('HH:mm') : '');
+              setCustomError(null);
+              if (time) onChange?.(time);
+              handleClose();
+            }}
+            ampm={false}
+            sx={{
+              width: textfieldWidth,
+              '& .MuiMenuItem-root.Mui-disabled': { display: 'none' },
+            }}
+            minTime={displayedMinTime}
+            maxTime={maxTime}
+          />
+        </LocalizationProvider>
+      </Popover>
+    </>
+  );
+};
+
+export default TimePicker;

package/src/components/Form/TimePicker/index.ts

@@ -0,0 +1 @@
+export { default } from './TimePicker';

package/src/components/IconButton/IconButton.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { MouseEventHandler, useMemo } from 'react';
 
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IconButtonStyle } from '@groupeactual/design-tokens';
@@ -11,11 +11,11 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../IconProvider';
-import Tooltip from '../Tooltip';
-import { Placement } from '../Tooltip/tooltip.interface';
+import IconProvider from '@/components/IconProvider';
+import Tooltip from '@/components/Tooltip';
+import { Placement } from '@/components/Tooltip/tooltip.interface';
 
-interface Props extends IconButtonProps {
+interface Props extends Omit<IconButtonProps, 'color'> {
   icon: IconDefinition;
   variant?: 'default' | 'table';
   positionGroup?: 'left' | 'middle' | 'right';
@@ -23,7 +23,8 @@ interface Props extends IconButtonProps {
   tooltipPosition?: Placement;
   size?: 'small' | 'medium';
   sx?: SxProps<Theme>;
-  onClick?: (e) => void;
+  color?: string;
+  onClick?: MouseEventHandler | undefined;
 }
 
 const IconButton = ({
@@ -33,6 +34,8 @@ const IconButton = ({
   tooltipText = '',
   tooltipPosition = 'top',
   size = 'medium',
+  color,
+  onClick,
   ...iconButtonProps
 }: Props) => {
   const theme = useTheme();
@@ -46,14 +49,17 @@ const IconButton = ({
         className={`IconButtonVariant-${variant} IconButtonSize-${size} ${
           positionGroup ? `IconButtonPositionGroup-${positionGroup}` : ''
         } `}
+        onClick={onClick}
         {...iconButtonProps}
       >
-        <IconProvider icon={icon} size={size === 'small' ? 'sm' : 'md'} />
+        <IconProvider
+          color={color}
+          icon={icon}
+          size={size === 'small' ? 'sm' : 'md'}
+        />
       </StyledIconButton>
     </Tooltip>
   );
 };
 
-IconButton.displayName = 'IconButton';
-
 export default IconButton;

package/src/components/IconProvider/IconProvider.tsx

@@ -111,7 +111,8 @@ const IconProvider = ({
           ...sx,
           color: usedColor,
           width: usedFontSize,
-          height: size,
+          height: usedFontSize,
+          lineHeight: usedFontSize + 'px',
           display: 'inline-flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -136,12 +137,10 @@ const IconProvider = ({
   }, [variant, size]);
 
   return (
-    <Box component="span" sx={getStyles()} {...props}>
+    <Box className="itemIcon" component="span" sx={getStyles()} {...props}>
       <FontAwesomeSvgIcon icon={icon} fontSize={usedFontSize} />
     </Box>
   );
 };
 
-IconProvider.displayName = 'IconProvider';
-
 export default IconProvider;

package/src/components/Link/Link.tsx

@@ -15,6 +15,4 @@ const Link = (props: Props) => {
   return <StyledLink {...(props as LinkProps)} />;
 };
 
-Link.displayName = 'Link';
-
 export default Link;

package/src/components/MenuItem/MenuItem.tsx

@@ -1,35 +1,21 @@
-import React, { useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 
-import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
 import { MenuItemStyle } from '@groupeactual/design-tokens';
 import {
-  Box,
   MenuItem as MenuItemMUI,
   MenuItemProps,
   styled,
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../IconProvider';
-import Text from '../Text';
-
-interface Props extends MenuItemProps {
-  testId: string;
-  onAction: (value?: string) => void;
-  icon?: IconDefinition;
-  text: string;
-  value?: string;
+interface Props extends Omit<MenuItemProps, 'onClick'> {
+  onClick: (_event?: React.MouseEvent<HTMLElement>) => void;
+  children: NonNullable<ReactNode>;
+  testId?: string;
   disabled?: boolean;
 }
 
-const MenuItemCustom = ({
-  onAction,
-  icon,
-  text,
-  testId,
-  value,
-  disabled,
-}: Props) => {
+const MenuItem = ({ onClick, children, testId, disabled, ...props }: Props) => {
   const theme = useTheme();
   const StyledMenuItem = useMemo(
     () => styled(MenuItemMUI)(MenuItemStyle(theme)),
@@ -37,29 +23,14 @@ const MenuItemCustom = ({
   );
   return (
     <StyledMenuItem
+      {...props}
       disabled={disabled}
-      value={value || text}
-      onClick={() => onAction(value)}
+      onClick={(e) => onClick(e)}
       data-testid={testId}
     >
-      <Box gap={1} display="flex">
-        {icon && (
-          <IconProvider
-            icon={icon}
-            size="sm"
-            color="bleuClickable"
-            sx={{
-              '&:hover': {
-                color: 'blueHoverClickable',
-              },
-            }}
-            data-testid={`${testId}-icon`}
-          />
-        )}
-        <Text variant="body2">{text}</Text>
-      </Box>
+      {children}
     </StyledMenuItem>
   );
 };
 
-export default MenuItemCustom;
+export default MenuItem;

package/src/components/Modal/Dialog/Dialog.tsx

@@ -10,10 +10,13 @@ import {
 } from '@mui/material';
 import { OverridableTypeMap } from '@mui/material/OverridableComponent';
 
-import IconButton from '../../IconButton';
-import IconProvider from '../../IconProvider';
-import Text from '../../Text';
-import { DialogTitleProps, ModalProps } from '../modal.interface';
+import IconButton from '@/components/IconButton';
+import IconProvider from '@/components/IconProvider';
+import {
+  DialogTitleProps,
+  ModalProps,
+} from '@/components/Modal/modal.interface';
+import Text from '@/components/Text';
 
 const BootstrapDialog = styled(DialogMUI)(() => ({
   '& .MuiDialogContent-root': {

package/src/components/Modal/Drawer/Drawer.tsx

@@ -9,8 +9,8 @@ import {
   Drawer as DrawerMUI,
 } from '@mui/material';
 
-import IconButton from '../../IconButton';
-import { ModalProps } from '../modal.interface';
+import IconButton from '@/components/IconButton';
+import { ModalProps } from '@/components/Modal/modal.interface';
 
 const Drawer = ({
   title,