@groupeactual/ui-kit 0.4.31 → 0.4.33

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -1,184 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { FormHelperText, InputLabel, MenuItem } from '@mui/material';
-import Box from '@mui/material/Box';
-import FormControl from '@mui/material/FormControl';
-import MuiSelect, {
-  SelectChangeEvent,
-  SelectProps
-} from '@mui/material/Select';
-import {
-  faChevronDown,
-  faCheck,
-  faTimesCircle
-} from '@fortawesome/pro-solid-svg-icons';
-import Icon from '../../Icon';
-import Chip from '../../Chip/Chip';
-
-interface Props<T>
-  extends Omit<
-    SelectProps<T[]>,
-    'value' | 'onChange' | 'defaultValue' | 'color'
-  > {
-  label: string;
-  options: T[];
-  helperText?: string;
-  color?: 'success';
-  getOptionLabel: (option: T) => string;
-  onChange: (value: T[]) => void;
-  defaultValue?: T[];
-  width?: number;
-}
-
-const MultiSelect = <T extends {}>({
-  label,
-  options,
-  color,
-  error,
-  placeholder,
-  width = 200,
-  defaultValue = [],
-  getOptionLabel,
-  helperText,
-  onChange,
-  onBlur,
-  ...props
-}: Props<T>) => {
-  const [values, setValues] = useState(defaultValue);
-
-  const handleChange = (event: SelectChangeEvent<typeof options>) => {
-    const newValue = event.target.value as T[];
-    onChange(newValue);
-    setValues(newValue);
-  };
-
-  const handleDeleteChip = (chipValue: T) => {
-    const newValue = values?.filter((val) => val !== chipValue);
-    setValues(newValue);
-  };
-
-  const getFormControlClassName = useMemo(() => {
-    const classNames: string[] = ['DsSelect'];
-    if (props.disabled) classNames.push('Mui-disabled');
-    if (values?.length > 0) classNames.push('Mui-filled');
-
-    return classNames;
-  }, [values, props.disabled]);
-
-  const getInputLabelClassName = useMemo(() => {
-    const classNames: string[] = [];
-    if (error) classNames.push('Mui-error');
-    if (props.disabled) classNames.push('Mui-disabled');
-
-    return classNames;
-  }, [error, props.disabled]);
-
-  return (
-    <Box sx={{ width }}>
-      <FormControl
-        id={label === placeholder ? 'select-mui' : 'select-ds'}
-        fullWidth
-        color={color}
-        className={getFormControlClassName.join(' ')}
-        sx={{
-          '.MuiOutlinedInput-input': {
-            marginTop: values?.length > 0 ? '-4px' : '2px'
-          }
-        }}
-      >
-        <InputLabel className={getInputLabelClassName.join(' ')}>
-          {label}
-        </InputLabel>
-        <MuiSelect
-          sx={{
-            color: color + '! important',
-            '& .MuiSelect-select .notranslate::after': placeholder
-              ? {
-                  content: `"${placeholder}"`,
-                  opacity:
-                    label === placeholder ? '0 !important' : '1 !important'
-                }
-              : {}
-          }}
-          multiple
-          label={label}
-          placeholder={label === placeholder ? '' : placeholder}
-          notched={
-            /* eslint-disable-next-line no-undefined */
-            label === placeholder ? undefined : true
-          }
-          value={values}
-          error={!!error}
-          onChange={handleChange}
-          onBlur={onBlur}
-          renderValue={(selected) => (
-            <Box sx={{ display: 'flex', flexWrap: 'nowrap', gap: 0.5 }}>
-              {selected?.map((selectedOption: T, i) => (
-                <Chip
-                  key={i}
-                  disabled={props.disabled}
-                  variant="filled"
-                  color="default"
-                  label={getOptionLabel(selectedOption)}
-                  suffixIcon={faTimesCircle}
-                  suffixAction={() =>
-                    !props.disabled && handleDeleteChip(selectedOption)
-                  }
-                  onMouseDown={(event) => {
-                    event.stopPropagation();
-                  }}
-                />
-              ))}
-            </Box>
-          )}
-          IconComponent={({ className }) => (
-            <Icon
-              className={
-                props.disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'
-              }
-              icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
-              sx={{
-                marginRight: '12px',
-                marginTop: color === 'success' ? '2px' : '0px',
-                transform:
-                  className.toString().includes('iconOpen') &&
-                  color !== 'success'
-                    ? 'rotate(180deg)'
-                    : 'none'
-              }}
-            />
-          )}
-          MenuProps={{
-            PaperProps: {
-              style: {
-                width
-              }
-            }
-          }}
-          {...props}
-        >
-          {options?.map((option, i) => (
-            <MenuItem
-              key={i}
-              value={option as any}
-              sx={{
-                fontWeight: values.indexOf(option) === -1 ? 400 : 500,
-                backgroundColor:
-                  values.indexOf(option) === -1 ? '#ffffff' : '#D3E4F0'
-              }}
-            >
-              {getOptionLabel(option)}
-            </MenuItem>
-          ))}
-        </MuiSelect>
-        {(error || helperText) && (
-          <FormHelperText component="span" className={error ? 'Mui-error' : ''}>
-            {error || helperText}
-          </FormHelperText>
-        )}
-      </FormControl>
-    </Box>
-  );
-};
-
-export default MultiSelect;

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

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

package/src/components/Form/Select/Select.tsx

@@ -1,154 +0,0 @@
-import React, { BaseSyntheticEvent, useMemo, useState } from 'react';
-import { FormHelperText, InputLabel, MenuItem } from '@mui/material';
-import Box from '@mui/material/Box';
-import FormControl from '@mui/material/FormControl';
-import MuiSelect, {
-  SelectChangeEvent,
-  SelectProps
-} from '@mui/material/Select';
-import { faChevronDown, faCheck } from '@fortawesome/pro-solid-svg-icons';
-import Icon from '../../Icon';
-
-interface Props<T>
-  extends Omit<
-    SelectProps<T>,
-    'value' | 'onChange' | 'defaultValue' | 'color'
-  > {
-  label?: string;
-  helperText?: string;
-  options: T[];
-  getOptionLabel?: (option: T) => string;
-  color?: 'success';
-  onChange: (value: T) => void;
-  defaultValue?: T | undefined;
-  width?: number;
-}
-
-const Select = <T extends {}>({
-  label = '',
-  defaultValue,
-  options,
-  color,
-  error,
-  placeholder,
-  onChange,
-  getOptionLabel,
-  helperText,
-  onBlur,
-  width = 200,
-  ...props
-}: Props<T>) => {
-  const [value, setValue] = useState(defaultValue);
-
-  const handleChange = (event: SelectChangeEvent<T>) => {
-    const newValue = event.target.value as T;
-    onChange(newValue);
-    setValue(newValue);
-  };
-
-  const getFormControlClassName = useMemo(() => {
-    const classNames: string[] = ['DsSelect'];
-    if (props.disabled) classNames.push('Mui-disabled');
-    if (value) classNames.push('Mui-filled');
-
-    return classNames;
-  }, [value, props.disabled]);
-
-  const getInputLabelClassName = useMemo(() => {
-    const classNames: string[] = [];
-    if (error) classNames.push('Mui-error');
-    if (props.disabled) classNames.push('Mui-disabled');
-
-    return classNames;
-  }, [error, props.disabled]);
-
-  return (
-    <Box sx={{ width }}>
-      <FormControl
-        id={label === placeholder ? 'select-mui' : 'select-ds'}
-        fullWidth
-        color={color}
-        className={getFormControlClassName.join(' ')}
-        sx={{
-          '.MuiOutlinedInput-input': {
-            marginTop: value ? '0px' : '2px'
-          }
-        }}
-      >
-        <InputLabel className={getInputLabelClassName.join(' ')}>
-          {label}
-        </InputLabel>
-        <MuiSelect
-          sx={{
-            color: color + '! important',
-            '& .MuiSelect-select .notranslate::after': placeholder
-              ? {
-                  content: `"${placeholder}"`,
-                  opacity:
-                    label === placeholder ? '0 !important' : '1 !important'
-                }
-              : {}
-          }}
-          label={label}
-          placeholder={label === placeholder ? '' : placeholder}
-          value={value}
-          error={!!error}
-          notched={
-            /* eslint-disable-next-line no-undefined */
-            label === placeholder ? undefined : true
-          }
-          onChange={handleChange}
-          onBlur={onBlur}
-          IconComponent={({ className }) => (
-            <Icon
-              className={
-                props.disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'
-              }
-              icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
-              sx={{
-                marginRight: '12px',
-                marginTop: color === 'success' ? '2px' : '0px',
-                transform:
-                  className.toString().includes('iconOpen') &&
-                  color !== 'success'
-                    ? 'rotate(180deg)'
-                    : 'none'
-              }}
-            />
-          )}
-          MenuProps={{
-            PaperProps: {
-              style: {
-                width
-              }
-            }
-          }}
-          {...props}
-        >
-          {options?.map((option, i) => (
-            <MenuItem
-              key={i}
-              value={option as any}
-              onMouseEnter={(e: BaseSyntheticEvent) =>
-                (e.target.style.backgroundColor = '#D3E4F0')
-              }
-              onMouseLeave={(e: BaseSyntheticEvent) =>
-                (e.target.style.backgroundColor = '#ffffff')
-              }
-            >
-              {getOptionLabel ? getOptionLabel(option) : option['label']}
-            </MenuItem>
-          ))}
-        </MuiSelect>
-        {(error || helperText) && (
-          <FormHelperText component="span" className={error ? 'Mui-error' : ''}>
-            {error || helperText}
-          </FormHelperText>
-        )}
-      </FormControl>
-    </Box>
-  );
-};
-
-export default Select;

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

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

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

@@ -1,98 +0,0 @@
-import React, {
-  FocusEventHandler,
-  ReactNode,
-  useEffect,
-  useState
-} from 'react';
-
-import MuiTextField, { TextFieldProps } from '@mui/material/TextField';
-import { InputProps as StandardInputProps } from '@mui/material/Input/Input';
-
-interface Props extends Omit<TextFieldProps, 'error'> {
-  error?: string;
-  onBlur?: FocusEventHandler<unknown>;
-  onChange?: StandardInputProps['onChange'];
-  label: string;
-  value: string;
-  name: string;
-  placeholder?: string;
-  disabled?: boolean;
-  endAdornment?: ReactNode;
-  maxLength?: number;
-}
-const TextField = ({
-  name,
-  value,
-  error,
-  onBlur,
-  onChange,
-  label,
-  disabled,
-  endAdornment,
-  placeholder = '',
-  maxLength,
-  ...props
-}: Props) => {
-  const [internalValue, setInternalValue] = useState(value);
-  useEffect(() => {
-    if (value !== internalValue) {
-      setInternalValue(value);
-    }
-  }, [value]);
-
-  return (
-    <MuiTextField
-      id={label === placeholder ? 'text-field-mui' : 'text-field-ds'}
-      className="DsTextField"
-      variant="outlined"
-      name={name}
-      label={label}
-      value={internalValue}
-      placeholder={label === placeholder ? '' : placeholder}
-      FormHelperTextProps={{ component: 'div' } as any}
-      InputLabelProps={{
-        shrink:
-          /* eslint-disable-next-line no-undefined */
-          label === placeholder ? undefined : true
-      }}
-      onClick={(e) => e.stopPropagation()}
-      onChange={(e) => {
-        setInternalValue(e.currentTarget.value);
-        if (onChange) {
-          onChange(e);
-        }
-      }}
-      onBlur={(e) => {
-        if (onBlur) {
-          onBlur(e);
-        }
-      }}
-      error={!!error}
-      disabled={disabled}
-      InputProps={{ endAdornment }}
-      inputProps={{ maxLength }}
-      {...props}
-      helperText={
-        <div style={{ display: 'table', width: '100%' }}>
-          {(error || props.helperText) && (
-            <div
-              style={{
-                display: maxLength ? 'table-cell' : '',
-                float: 'left'
-              }}
-            >
-              {error || props.helperText}
-            </div>
-          )}
-          {maxLength && (
-            <div style={{ display: 'table-cell', float: 'right' }}>
-              {internalValue.length}/{maxLength} caract.
-            </div>
-          )}
-        </div>
-      }
-    />
-  );
-};
-
-export default TextField;

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

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

package/src/components/Icon/Icon.tsx

@@ -1,126 +0,0 @@
-import React, { forwardRef, ReactElement } from 'react';
-import SvgIcon from '@mui/material/SvgIcon';
-import { SxProps, Theme } from '@mui/material/styles';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import Box, { BoxProps } from '@mui/material/Box';
-import { useTheme } from '@mui/system';
-
-const FontSizes = {
-  xs: 8,
-  sm: 12,
-  md: 16,
-  lg: 24,
-  xl: 32,
-  xxl: 40,
-  xxxl: 72
-};
-
-interface Props {
-  variant?: 'square' | 'none';
-  icon: IconDefinition;
-  color?: string;
-  size?: number | keyof typeof FontSizes;
-}
-
-interface FontAwesomeSvgIconProps {
-  icon: any;
-  fontSize: number | undefined;
-}
-
-// eslint-disable-next-line react/display-name
-const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
-  ({ icon, fontSize }, ref) => {
-    const {
-      icon: [width, height, , , svgPathData]
-    } = icon;
-
-    return (
-      <SvgIcon
-        ref={ref}
-        viewBox={`0 0 ${width as string} ${height as string}`}
-        sx={{
-          fontSize: fontSize ?? '14px'
-        }}
-      >
-        {typeof svgPathData === 'string' ? (
-          <path d={svgPathData} />
-        ) : (
-          /**
-           * A multi-path Font Awesome icon seems to imply a duotune icon. The 0th path seems to
-           * be the faded element (referred to as the "secondary" path in the Font Awesome docs)
-           * of a duotone icon. 40% is the default opacity.
-           *
-           * @see https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#changing-opacity
-           */
-          svgPathData.map((d: string, i: number) => (
-            <path style={{ opacity: i === 0 ? 0.4 : 1 }} d={d} key={i} />
-          ))
-        )}
-      </SvgIcon>
-    );
-  }
-);
-
-const IconProvider = ({
-  variant = 'none',
-  icon,
-  color = '#136cac', // blueClickable
-  size = 16,
-  ...props
-}: Props & BoxProps): ReactElement => {
-  const getStyles = (): SxProps<Theme> => {
-    const theme = useTheme();
-    const usedColor = theme.palette[color]
-      ? theme.palette[color]
-      : !color || color?.length === 0
-      ? '#136cac'
-      : color;
-
-    switch (variant) {
-      case 'square':
-        return {
-          color: usedColor,
-          backgroundColor: `${usedColor}14`,
-          borderRadius: '4px',
-          borderColor: '1px solid ' + usedColor,
-          overflow: 'visible',
-          padding: '10px',
-          width: '35px',
-          height: '35px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center'
-        };
-      default:
-        return {
-          color: usedColor,
-          width: usedFontSize,
-          height: size,
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        };
-    }
-  };
-
-  const isKey = (key: PropertyKey): key is keyof typeof FontSizes => {
-    return key in FontSizes;
-  };
-
-  const usedFontSize: number =
-    variant === 'square'
-      ? 16
-      : isKey(size)
-      ? FontSizes[size]
-      : size >= 0
-      ? size
-      : 16;
-
-  return (
-    <Box component="span" sx={getStyles()} {...props}>
-      <FontAwesomeSvgIcon icon={icon} fontSize={usedFontSize} />
-    </Box>
-  );
-};
-
-export default IconProvider;

package/src/components/Icon/index.ts

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

package/src/components/Link/Link.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Link as LinkMui, LinkProps } from '@mui/material';
-
-interface Props extends Omit<LinkProps, 'variant'> {
-  variant?: 'link1' | 'link2';
-  component?: any;
-}
-
-const Link = (props: Props) => <LinkMui {...(props as LinkProps)} />;
-
-export default Link;

package/src/components/Link/index.ts

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

package/src/components/Pagination/Pagination.tsx

@@ -1,116 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Box,
-  Divider,
-  Pagination as MUIPagination,
-  MenuItem,
-  Select
-} from '@mui/material';
-
-import Text from '../Text';
-
-interface Props {
-  totalString: string;
-  totalPerPageString: string;
-  totalPages: number;
-  limitsPerPage: number[];
-  setLimit?: (limit: number) => void;
-  setPage?: (page: number) => void;
-  page?: number;
-  limit?: number;
-}
-
-const Pagination = ({
-  totalString,
-  totalPerPageString,
-  totalPages,
-  limitsPerPage,
-  setLimit,
-  setPage,
-  page = 1,
-  limit
-}: Props) => {
-  const [internalPage, setInternalPage] = useState<number>(page);
-  const [internalLimit, setInternalLimit] = useState<number>(
-    limit ?? limitsPerPage[0]
-  );
-  useEffect(() => {
-    if (page !== internalPage) {
-      setInternalPage(page);
-    }
-  }, [page]);
-
-  useEffect(() => {
-    if (limit && limit !== internalLimit) {
-      setInternalLimit(limit);
-    }
-  }, [limit]);
-
-  return (
-    <>
-      <Box display="flex">
-        <Text color="greyXDark" variant="body1Bold" pt="10px" pr="16px">
-          {totalString}
-        </Text>
-        {totalPages > 1 && (
-          <>
-            <Divider
-              orientation="vertical"
-              sx={{ marginRight: '16px', color: 'greyXLight' }}
-            />
-            <Select
-              sx={{
-                // @TODO replace by Select from ui-kit when ready
-                height: '32px',
-                width: '75px',
-                fontSize: '14px',
-                fontWeight: 400
-              }}
-              labelId="select-label"
-              id="dac-select-label"
-              value={internalLimit}
-              onChange={(event) => {
-                setInternalLimit(Number(event?.target?.value));
-                setLimit && setLimit(Number(event?.target?.value));
-              }}
-            >
-              {limitsPerPage.map((limit, id) => (
-                <MenuItem key={id} value={limit}>
-                  {limit}
-                </MenuItem>
-              ))}
-            </Select>
-            <Text
-              color="greyXDark"
-              variant="body1Regular"
-              pt="6px"
-              pl="6px"
-              pr="16px"
-            >
-              {totalPerPageString}
-            </Text>
-            <Divider
-              orientation="vertical"
-              sx={{ marginRight: '16px', color: 'greyXLight' }}
-            />
-          </>
-        )}
-      </Box>
-      {totalPages > 1 && (
-        <Box display="flex" pr="4px">
-          <MUIPagination
-            variant="outlined"
-            shape="rounded"
-            count={totalPages}
-            page={internalPage}
-            onChange={(event: React.ChangeEvent<unknown>, value: number) => {
-              setInternalPage(value);
-              setPage && setPage(value);
-            }}
-          />
-        </Box>
-      )}
-    </>
-  );
-};
-export default Pagination;