@groupeactual/ui-kit 1.7.0-beta.0 → 1.7.0-beta.4

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';
@@ -15,7 +15,7 @@ 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 '@/components/IconProvider';
-import Text from '@/components/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/Navigation/Stepper/Step.tsx

@@ -17,7 +17,7 @@ export const StepComponent = ({
 }: {
   step: Step;
   canNavigate: boolean;
-  onNavigate: (link: string) => void;
+  onNavigate: (_link: string) => void;
 }) => {
   const percent = stepperItemsToPercent(items);
   const isFullyValidated = percent === 100;

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -9,7 +9,7 @@ import { Step } from './stepper.interface';
 interface Props {
   steps: Step[];
   canNavigate: boolean;
-  onNavigate?: (url: string) => void;
+  onNavigate?: (_url: string) => void;
   sx?: SxProps<Theme>;
 }
 const Stepper = ({

package/src/components/Pagination/Pagination.tsx

@@ -22,8 +22,8 @@ interface Props {
   limitsPerPage?: number[];
   page?: number;
   limit?: number;
-  setPage?: (page: number) => void;
-  setLimit?: (limit: number) => void;
+  setPage?: (_page: number) => void;
+  setLimit?: (_limit: number) => void;
 }
 
 const Pagination = ({
@@ -88,7 +88,7 @@ const Pagination = ({
       }}
     >
       <Box display="flex" alignItems="center">
-        <Text variant="body1Bold">
+        <Text variant="body1Medium">
           {totalRows} {totalString}
         </Text>
         <Divider
@@ -104,6 +104,7 @@ const Pagination = ({
           className="dac-select-label"
           labelId="select-label"
           value={internalLimit}
+          inputProps={{ MenuProps: { disableScrollLock: true } }}
           onChange={handleChangeLimit}
           options={limitsPerPage}
           getRenderValue={(value) => value.toString()}
@@ -138,6 +139,4 @@ const Pagination = ({
   );
 };
 
-Pagination.displayName = 'Pagination';
-
 export default Pagination;

package/src/components/Snackbar/Snackbar.tsx

@@ -45,6 +45,4 @@ const Snackbar = ({ text, severity }: Props) => {
   );
 };
 
-Snackbar.displayName = 'Snackbar';
-
 export default Snackbar;

package/src/components/Text/Text.tsx

@@ -33,6 +33,4 @@ const Text = (props: Props) => (
   <Typography color="greyXDark" {...(props as TypographyProps)} />
 );
 
-Text.displayName = 'Text';
-
 export default Text;

package/src/components/Tooltip/Tooltip.tsx

@@ -1,65 +1,74 @@
-import React, { ReactElement } from 'react';
+import React, { ReactNode } from 'react';
 
 import {
   Box,
   Tooltip as TooltipMui,
   TooltipProps,
-  styled,
   tooltipClasses,
 } from '@mui/material';
 
 import { Placement } from './tooltip.interface';
 
 interface Props extends Omit<TooltipProps, 'icon' | 'children' | 'placement'> {
-  title: string;
-  children: ReactElement;
+  title: ReactNode;
+  children: ReactNode;
   placement?: Placement;
+  placementMargin?: number;
 }
 
 const Tooltip = ({
   title,
   placement = 'right',
   children,
+  placementMargin = 4,
   ...tooltipProps
 }: Props) => {
   if (!title) {
     return <>{children}</>;
   }
-  const StyledTooltip = styled(({ classes, ...tooltipProps }: TooltipProps) => (
-    <TooltipMui {...tooltipProps} classes={classes} />
-  ))(() => ({
-    [`& .${tooltipClasses.tooltip}`]: {
-      backgroundColor: '#272727',
-      padding: '4px !important',
-      fontFamily: 'Roboto, sans-serif',
-      fontSize: '13px',
-      color: 'white',
-      fontWeight: 400,
-    },
-    [`& .${tooltipClasses.tooltipPlacementTop}`]: {
-      marginBottom: '4px !important',
-    },
-    [`& .${tooltipClasses.tooltipPlacementRight}`]: {
-      marginLeft: '4px !important',
-    },
-    [`& .${tooltipClasses.tooltipPlacementBottom}`]: {
-      marginTop: '4px !important',
-    },
-    [`& .${tooltipClasses.tooltipPlacementLeft}`]: {
-      marginRight: '4px !important',
-    },
-  }));
 
   return (
-    <StyledTooltip
-      placement={placement || undefined}
+    <TooltipMui
       title={<>{title}</>}
       {...tooltipProps}
+      sx={{
+        display: 'inline-flex',
+        ...tooltipProps.sx,
+      }}
+      placement={placement || undefined}
+      slotProps={{
+        popper: {
+          sx: {
+            [`&.${tooltipClasses.popper} .MuiTooltip-tooltip`]: {
+              backgroundColor: 'greyXDark',
+              padding: '4px !important',
+              fontSize: '12px !important',
+              color: 'white',
+              fontWeight: 400,
+            },
+            [`&.${tooltipClasses.popper}[data-popper-placement*="bottom"] .${tooltipClasses.tooltip}`]:
+              {
+                marginTop: placementMargin + 'px',
+              },
+            [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]:
+              {
+                marginBottom: placementMargin + 'px',
+              },
+            [`&.${tooltipClasses.popper}[data-popper-placement*="right"] .${tooltipClasses.tooltip}`]:
+              {
+                marginLeft: placementMargin + 'px',
+              },
+            [`&.${tooltipClasses.popper}[data-popper-placement*="left"] .${tooltipClasses.tooltip}`]:
+              {
+                marginRight: placementMargin + 'px',
+              },
+          },
+        },
+      }}
     >
       <Box component="span">{children}</Box>
-    </StyledTooltip>
+    </TooltipMui>
   );
 };
-Tooltip.displayName = 'Tooltip';
 
 export default Tooltip;