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

package/src/components/Form/CheckboxGroup/CheckboxGroup.tsx

@@ -1,13 +1,11 @@
-import React, { useMemo, useState } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 
-import { CheckboxGroupStyle } from '@groupeactual/design-tokens';
 import {
+  Box,
   FormControl,
   FormGroup,
   FormHelperText,
   FormLabel,
-  styled,
-  useTheme,
 } from '@mui/material';
 
 import Checkbox from '@/components/Form/Checkbox';
@@ -15,71 +13,99 @@ import Checkbox from '@/components/Form/Checkbox';
 import { CheckboxItemType } from './checkboxgroup.interface';
 
 interface CheckboxGroupProps {
-  label: string;
+  label?: ReactNode;
   options: CheckboxItemType[];
   disabled?: boolean;
   error?: string;
   helperText?: string;
-  onChange?: (_selectedOptions: Record<string, boolean>) => void;
+  onChange?: (
+    _selectedOptionsNameValue: Record<string, boolean>,
+    _updatedOptions: CheckboxItemType[],
+    _updatedIndexOptions: number,
+  ) => void;
 }
 
-const CheckboxGroup = ({
-  options,
-  label,
-  disabled,
-  error,
-  helperText,
-  onChange,
-}: CheckboxGroupProps) => {
-  const theme = useTheme();
-  const StyledCheckboxGroupForm = useMemo(
-    () => styled(FormControl)(CheckboxGroupStyle(theme)),
-    [theme],
-  );
-  const [selectedOptions, setSelectedOptions] = useState({});
+const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ options, label, disabled, error, helperText, onChange }, ref) => {
+    const handleChange = (name: string, isChecked: boolean) => {
+      const index = options.findIndex((option) => option.name === name);
+      if (index === -1) return;
 
-  const handleChange = (label: string, isChecked: boolean) => {
-    const updatedOptions = {
-      ...selectedOptions,
-      [label]: isChecked,
+      const optionsChanged = options.map((option, i) =>
+        i === index ? { ...option, value: isChecked } : option,
+      );
+
+      const selectedOptions: Record<string, boolean> = optionsChanged.reduce(
+        (acc, option) => ({
+          ...acc,
+          [option.name]: option.value ?? false,
+        }),
+        {},
+      );
+
+      onChange?.(selectedOptions, optionsChanged, index);
     };
-    setSelectedOptions(updatedOptions);
-    onChange?.(updatedOptions);
-  };
 
-  const getLegendClassName = useMemo(() => {
-    const classNames: string[] = [];
-    if (disabled) classNames.push('Mui-disabled');
-    if (error) classNames.push('Mui-error');
-    return classNames.join(' ');
-  }, [disabled]);
+    const getClassName = useMemo(() => {
+      const classNames = [disabled && 'Mui-disabled', error && 'Mui-error'];
+
+      return classNames.filter(Boolean).join(' ');
+    }, [disabled, error]);
+
+    return (
+      <Box data-testid="ds-checkbox-group-container">
+        <FormControl
+          disabled={disabled}
+          error={!!error}
+          ref={ref}
+          data-testid="ds-checkbox-group-form-control"
+        >
+          {label && label !== '' && (
+            <FormLabel
+              component="legend"
+              className={getClassName}
+              sx={{
+                marginLeft: '-6px',
+                marginBottom: '4px',
+              }}
+              data-testid="ds-checkbox-group-label"
+            >
+              {label}
+            </FormLabel>
+          )}
+          <FormGroup data-testid="ds-checkbox-group">
+            {options
+              ?.slice(0, 7)
+              .map((option) => (
+                <Checkbox
+                  key={option.name}
+                  name={option.name}
+                  value={option.value || false}
+                  onChange={(name, isChecked: boolean) =>
+                    handleChange(name, isChecked)
+                  }
+                  disabled={disabled}
+                  label={option.label}
+                  data-testid={`ds-checkbox-${option.name}`}
+                />
+              ))}
+          </FormGroup>
+          {(error || helperText) && (
+            <FormHelperText
+              component="span"
+              className={getClassName}
+              sx={{ marginTop: '3px', marginLeft: '-6px' }}
+              data-testid="ds-checkbox-group-helper-text"
+            >
+              {error || helperText}
+            </FormHelperText>
+          )}
+        </FormControl>
+      </Box>
+    );
+  },
+);
 
-  return (
-    <StyledCheckboxGroupForm error={!!error} className={getLegendClassName}>
-      <FormLabel component="legend">{label}</FormLabel>
-      <FormGroup>
-        {options
-          ?.slice(0, 7)
-          .map((option) => (
-            <Checkbox
-              key={option.name}
-              name={option.name}
-              value={selectedOptions[option.name] || false}
-              onChange={(label, isChecked) => handleChange(label, isChecked)}
-              disabled={disabled}
-              label={option.label}
-              infoBubbleContent={option.infoBubbleContent}
-              infoBubblePosition={option.infoBubblePosition}
-            />
-          ))}
-      </FormGroup>
-      {(error || helperText) && (
-        <FormHelperText component="span" className={error ? 'Mui-error' : ''}>
-          {error || helperText}
-        </FormHelperText>
-      )}
-    </StyledCheckboxGroupForm>
-  );
-};
+CheckboxGroup.displayName = 'CheckboxGroup';
 
 export default CheckboxGroup;

package/src/components/Form/CheckboxGroup/checkboxgroup.interface.ts

@@ -4,19 +4,4 @@ export interface CheckboxItemType {
   label: ReactNode;
   value: boolean;
   name: string;
-  infoBubbleContent?: string;
-  infoBubblePosition?:
-    | 'right'
-    | 'bottom'
-    | 'left'
-    | 'top'
-    | 'bottom-end'
-    | 'bottom-start'
-    | 'left-end'
-    | 'left-start'
-    | 'right-end'
-    | 'right-start'
-    | 'top-end'
-    | 'top-start'
-    | undefined;
 }

package/src/components/Form/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactNode, useId, useMemo } from 'react';
 
 import {
   faAngleLeft,
@@ -7,14 +7,7 @@ import {
   faCheck,
 } from '@fortawesome/pro-regular-svg-icons';
 import { faCaretDown } from '@fortawesome/pro-solid-svg-icons';
-import { DatePickerStyle } from '@groupeactual/design-tokens';
-import {
-  Box,
-  FormHelperText,
-  IconButton,
-  styled,
-  useTheme,
-} from '@mui/material';
+import { Box, FormHelperText, IconButton, InputLabel } from '@mui/material';
 import {
   DatePicker as DatePickerMUI,
   DatePickerProps,
@@ -29,39 +22,53 @@ import IconProvider from '@/components/IconProvider';
 
 interface Props<T extends Dayjs>
   extends Omit<DatePickerProps<T>, 'onChange' | 'width'> {
+  label?: ReactNode;
   value: T | null | undefined;
-  onChange: (_value: T | null | undefined) => void;
+  disabled?: boolean;
   error?: string;
-  success?: boolean;
+  color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
   helperText?: string;
   width?: string;
   locale?: 'fr' | 'en';
+  onChange: (_value: T | null | undefined) => void;
 }
 
-const DatePicker = <T extends Dayjs>({
-  value,
-  onChange,
-  error,
-  success,
-  helperText,
-  width,
-  locale = 'fr',
-  ...props
-}: Props<T>) => {
-  const theme = useTheme();
+function fixedForwardRef<T, P = {}>(
+  render: (_props: P, _ref: React.Ref<T>) => React.ReactNode,
+): (_props: P & React.RefAttributes<T>) => React.ReactNode {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return React.forwardRef(render as any) as any;
+}
 
-  const StyleProvider = useMemo(
-    () => styled(Box)(DatePickerStyle(theme)),
-    [theme],
-  );
+const DatePickerComponent = <T extends Dayjs>(
+  {
+    label,
+    value,
+    error,
+    color,
+    helperText,
+    width = '100%',
+    locale = 'fr',
+    disabled,
+    onChange,
+    ...props
+  }: Props<T>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) => {
+  const generatedId = useId();
+
+  const inputId = props.name || `datepicker-${generatedId}`;
 
-  const getStateClassName = useMemo(() => {
-    const classNames: string[] = [];
-    if (error) classNames.push('Mui-error');
-    if (success) classNames.push('Mui-success');
+  const getClassName = useMemo(() => {
+    const classNames = [
+      value && 'Mui-filled',
+      error && 'Mui-error',
+      disabled && 'Mui-disabled',
+      color === 'success' && 'Mui-success',
+    ];
 
-    return classNames.join(' ');
-  }, [error, success]);
+    return classNames.filter(Boolean).join(' ');
+  }, [value, error, color, disabled]);
 
   const CustomIconButton = ({ icon, buttonProps }) => {
     return (
@@ -82,7 +89,7 @@ const DatePicker = <T extends Dayjs>({
   };
 
   return (
-    <StyleProvider display="flex" flexDirection="column" sx={{ width }}>
+    <Box data-testid="ds-date-picker-container">
       <LocalizationProvider
         dateAdapter={AdapterDayjs}
         adapterLocale={locale}
@@ -92,26 +99,58 @@ const DatePicker = <T extends Dayjs>({
             : enUS.components.MuiLocalizationProvider.defaultProps.localeText
         }
       >
+        {label && (
+          <InputLabel
+            htmlFor={inputId}
+            disabled={disabled}
+            className={getClassName}
+            data-testid="ds-date-picker-label"
+          >
+            {label}
+          </InputLabel>
+        )}
         <DatePickerMUI
-          className={getStateClassName}
+          ref={ref}
+          className={getClassName}
+          disabled={disabled}
           value={value}
+          sx={{
+            width,
+            ...props.sx,
+          }}
           onChange={onChange}
           slots={{
             openPickerIcon: () => (
               <IconProvider
                 sx={{ marginTop: '-2px' }}
-                icon={success ? faCheck : faCalendarDay}
+                className={
+                  getClassName + (color === 'success' ? '' : ' SelectIcon')
+                }
+                icon={color === 'success' ? faCheck : faCalendarDay}
                 size="md"
+                data-testid="ds-open-picker-icon"
               />
             ),
             previousIconButton: (props) => (
-              <CustomIconButton icon={faAngleLeft} buttonProps={props} />
+              <CustomIconButton
+                icon={faAngleLeft}
+                buttonProps={props}
+                data-testid="ds-previous-icon-button"
+              />
             ),
             nextIconButton: (props) => (
-              <CustomIconButton icon={faAngleRight} buttonProps={props} />
+              <CustomIconButton
+                icon={faAngleRight}
+                buttonProps={props}
+                data-testid="ds-next-icon-button"
+              />
             ),
             switchViewButton: (props) => (
-              <CustomIconButton icon={faCaretDown} buttonProps={props} />
+              <CustomIconButton
+                icon={faCaretDown}
+                buttonProps={props}
+                data-testid="ds-switch-view-button"
+              />
             ),
           }}
           slotProps={{
@@ -123,6 +162,7 @@ const DatePicker = <T extends Dayjs>({
             textField: {
               variant: 'outlined',
               error: !!error,
+              className: getClassName,
             },
             calendarHeader: {
               sx: {
@@ -152,12 +192,20 @@ const DatePicker = <T extends Dayjs>({
         />
       </LocalizationProvider>
       {(error || helperText) && (
-        <FormHelperText component="span" className={error ? 'Mui-error' : ''}>
+        <FormHelperText
+          component="span"
+          className={getClassName}
+          data-testid="ds-form-helper-text"
+        >
           {error || helperText}
         </FormHelperText>
       )}
-    </StyleProvider>
+    </Box>
   );
 };
 
+DatePickerComponent.displayName = 'DatePicker';
+
+const DatePicker = fixedForwardRef(DatePickerComponent);
+
 export default DatePicker;