@groupeactual/ui-kit 0.4.33 → 0.4.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.4.33",
+  "version": "0.4.34",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
     "@babel/core": "^7.20.5",
@@ -32,7 +32,8 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -47,7 +48,10 @@
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@mui/base": "^5.0.0-alpha.108",
     "@mui/material": "^5.10.16",
-    "@mui/system": "^5.10.16"
+    "@mui/system": "^5.10.16",
+    "@emotion/is-prop-valid": "^1.2.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5"
   },
   "scripts": {
     "build": "rollup -c",

package/src/DesignSystemProvider.tsx

@@ -0,0 +1,61 @@
+import React, {
+  PropsWithChildren,
+  useState,
+  createContext,
+  useContext
+} from 'react';
+import { useMaterialThemeTokens } from '@groupeactual/design-tokens';
+import { createTheme, ThemeProvider } from '@mui/material';
+
+// Deux themes pour le moment :
+// Default = Theme backoffice Material
+// Ep = Espace personnel
+type Theme = 'Default' | 'Ep';
+
+export interface DesignSystemContextValues {
+  isDarkTheme: boolean;
+  themeName: Theme;
+  toggleDarkTheme: () => void;
+}
+
+export const DesignSystemContext = createContext<DesignSystemContextValues>({
+  isDarkTheme: false,
+  themeName: 'Default',
+  toggleDarkTheme: () => {
+    return;
+  }
+});
+
+interface Props {
+  name?: Theme;
+}
+
+const MaterialThemeProvider = ({ children }: PropsWithChildren<unknown>) => {
+  const { themeName } =
+    useContext<DesignSystemContextValues>(DesignSystemContext);
+  const { muiTokens } = useMaterialThemeTokens(themeName);
+  const theme = createTheme(muiTokens);
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+const DesignSystemProvider = ({
+  children,
+  name: themeName = 'Default'
+}: PropsWithChildren<Props>) => {
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+
+  const toggleDarkTheme = (): void => {
+    setIsDarkTheme(!isDarkTheme);
+  };
+
+  return (
+    <DesignSystemContext.Provider
+      value={{ isDarkTheme, themeName, toggleDarkTheme }}
+    >
+      <MaterialThemeProvider>{children}</MaterialThemeProvider>
+    </DesignSystemContext.Provider>
+  );
+};
+
+export default DesignSystemProvider;

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,72 @@
+import React, {
+  MouseEventHandler,
+  ReactNode,
+  useEffect,
+  useState
+} from 'react';
+import AccordionMui, { AccordionProps } from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+
+interface Props extends AccordionProps {
+  icon: ReactNode;
+  title?: string;
+  summaryHeight?: number;
+  expanded?: boolean;
+  onClick?: MouseEventHandler;
+}
+
+const Accordion = ({
+  icon,
+  title,
+  summaryHeight,
+  expanded = false,
+  onClick,
+  children,
+  ...props
+}: Props) => {
+  const [internalExpanded, setInternalExpanded] = useState(expanded);
+
+  useEffect(() => {
+    if (expanded !== internalExpanded) {
+      setInternalExpanded(expanded);
+    }
+  }, [expanded]);
+
+  return (
+    <AccordionMui
+      sx={{ border: `1px solid`, borderColor: 'greyLightDefaultBorder' }}
+      expanded={internalExpanded}
+      onClick={(e) => {
+        if (!props.disabled) {
+          setInternalExpanded(!internalExpanded);
+          onClick && onClick(e);
+        }
+      }}
+      {...props}
+    >
+      <AccordionSummary
+        expandIcon={icon}
+        sx={{
+          fontWeight: 500,
+          fontSize: 18,
+          lineHeight: 21,
+          height: summaryHeight || 60
+        }}
+      >
+        {title}
+      </AccordionSummary>
+      <AccordionDetails
+        sx={{
+          backgroundColor: 'greyXLight',
+          borderTop: '1px solid',
+          borderColor: 'greyLightDefaultBorder'
+        }}
+      >
+        {children}
+      </AccordionDetails>
+    </AccordionMui>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/index.ts

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

package/src/components/Button/Button.tsx

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { Button as ButtonMUI } from '@mui/material';
+
+interface Props extends Omit<ButtonProps, 'variant' | 'children'> {
+  variant?: 'primary' | 'secondary';
+  children?: ReactNode;
+}
+
+const Button = ({ variant, children, ...props }: Props) => {
+  return (
+    <ButtonMUI variant={variant as 'text'} {...props}>
+      {children}
+    </ButtonMUI>
+  );
+};
+
+export default Button;

package/src/components/Button/index.ts

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

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ChipProps as ChipPropsMUI } from '@mui/material/Chip';
+import { Chip as ChipMUI, Tooltip } from '@mui/material';
+import { useTheme } from '@mui/system';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+import IconProvider from '../Icon';
+
+interface Props
+  extends Omit<
+    ChipPropsMUI,
+    'suffix' | 'prefix' | 'onDelete' | 'onDeleteIcon'
+  > {
+  label: string;
+  size?: 'small';
+  prefixIcon?: IconDefinition;
+  suffixIcon?: IconDefinition;
+  suffixAction?: (e: any) => void;
+  suffixTooltip?: string;
+  tooltip?: string;
+  maxWidth?: number;
+  maxLength?: number;
+}
+
+const Chip = ({
+  label,
+  prefixIcon,
+  suffixIcon,
+  suffixTooltip,
+  suffixAction,
+  tooltip,
+  size = 'small',
+  maxWidth = 300,
+  maxLength = 17,
+  ...props
+}: Props) => {
+  const theme = useTheme();
+  const [currentLabel, setCurrentLabel] = useState<string>(label);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  let backgroundColor: string =
+    props.color && theme.palette[props.color]
+      ? typeof theme.palette[props.color] === 'object'
+        ? theme.palette[props.color]['main']
+        : theme.palette[props.color]
+      : props.color ?? 'white';
+
+  if (props.variant === 'filled') {
+    // opacity 0.08
+    backgroundColor = `${backgroundColor}14`;
+  } else {
+    backgroundColor = 'white';
+  }
+
+  const emptyOnDelete = () => {
+    return null;
+  };
+
+  // use maxwidth props to set the max width of the chip based on the column width
+  // if a chip is in a table, the width should match the width of the column.
+  useEffect(() => {
+    if (
+      ref?.current?.offsetWidth &&
+      ref?.current?.offsetWidth > maxWidth &&
+      `${label.substring(0, maxLength)}...` !== currentLabel
+    ) {
+      setCurrentLabel(`${label.substring(0, maxLength)}...`);
+    } else if (
+      ref?.current?.offsetWidth &&
+      ref?.current?.offsetWidth <= maxWidth &&
+      label === `${label.substring(0, maxLength)}...`
+    ) {
+      setCurrentLabel(label);
+    }
+  }, [ref?.current?.offsetWidth]);
+
+  return (
+    <Tooltip title={tooltip} placement="right-start">
+      <Tooltip
+        title={suffixTooltip}
+        open={isOpen}
+        placement="bottom-end"
+        sx={{ cursor: suffixAction ? 'pointer !important' : 'default' }}
+      >
+        <ChipMUI
+          label={currentLabel}
+          ref={ref}
+          size={size}
+          sx={{
+            backgroundColor: backgroundColor,
+            '&.MuiChip-colorSecondary:hover': suffixIcon &&
+              suffixAction && {
+                backgroundColor: '#004f88 !important'
+              },
+            '&.MuiChip-deleteIconColorPrimary:hover': suffixIcon &&
+              suffixAction && {
+                backgroundColor: '#004f88 !important'
+              }
+          }}
+          avatar={
+            prefixIcon ? <IconProvider icon={prefixIcon} size="sm" /> : <></>
+          }
+          deleteIcon={
+            suffixIcon ? (
+              <IconProvider
+                icon={suffixIcon}
+                onMouseEnter={() => suffixTooltip && setIsOpen(true)}
+                onMouseLeave={() => suffixTooltip && setIsOpen(false)}
+                size="sm"
+              />
+            ) : (
+              <></>
+            )
+          }
+          onDelete={suffixAction ?? emptyOnDelete}
+          {...props}
+        />
+      </Tooltip>
+    </Tooltip>
+  );
+};
+
+export default Chip;

package/src/components/Chip/index.ts

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

package/src/components/EmbbededNotification/EmbeddedNotification.tsx

@@ -0,0 +1,95 @@
+import React, { ReactNode } from 'react';
+import { Box, BoxProps } from '@mui/material';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faCircleXmark,
+  faCircleInfo,
+  faCircleCheck,
+  faCircleExclamation
+} from '@fortawesome/pro-solid-svg-icons';
+
+import Text from '../Text';
+import Icon from '../Icon/Icon';
+
+interface Props extends BoxProps {
+  variant: 'warning' | 'error' | 'success' | 'infos';
+  title: string;
+  text?: ReactNode;
+}
+
+const EmbeddedNotification = ({
+  title,
+  text,
+  variant = 'infos',
+  ...props
+}: Props) => {
+  interface EmbeddedNotifVariant {
+    color: string;
+    icon: IconDefinition;
+  }
+
+  const variantNotification: Record<string, EmbeddedNotifVariant> = {
+    warning: {
+      color: 'orangeWarning',
+      icon: faCircleExclamation
+    },
+    error: {
+      color: 'redError',
+      icon: faCircleXmark
+    },
+    success: {
+      color: 'greenSuccess',
+      icon: faCircleCheck
+    },
+    infos: {
+      color: 'blueInfo',
+      icon: faCircleInfo
+    }
+  };
+
+  return (
+    <Box
+      border="1px solid"
+      borderColor={variantNotification[variant].color}
+      mt="4px"
+      p="4px"
+      borderRadius="5px"
+      {...props}
+    >
+      <Box display="flex" alignItems="center" pb="2px">
+        <Box sx={{ pl: '12px', pr: '16px', display: 'flex' }}>
+          <Icon
+            icon={variantNotification[variant].icon}
+            color={variantNotification[variant].color}
+          />
+        </Box>
+        <Box>
+          <Box>
+            <Text
+              align="left"
+              variant="body1Bold"
+              color={variantNotification[variant].color}
+              display="inline-block"
+            >
+              {title}
+            </Text>
+          </Box>
+          {text && (
+            <Box>
+              <Text
+                align="left"
+                variant="body1Regular"
+                color="greyDark"
+                display="inline-block"
+              >
+                {text}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default EmbeddedNotification;

package/src/components/EmbbededNotification/index.ts

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

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+
+import CheckboxMUI, { CheckboxProps } from '@mui/material/Checkbox';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/system/Box';
+
+interface Props {
+  name: string;
+  value: boolean;
+  label: string;
+  onChange?: (
+    field: string,
+    value: any,
+    shouldValidate?: boolean | undefined
+  ) => void;
+  error?: string;
+}
+
+const Checkbox = ({
+  name,
+  value,
+  error,
+  label,
+  onChange,
+  ...props
+}: CheckboxProps & Props): JSX.Element => {
+  const [internalValue, setInternalValue] = useState(value);
+
+  useEffect(() => {
+    if (value !== internalValue) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  return (
+    <FormControl fullWidth>
+      <FormControlLabel
+        control={
+          <Box>
+            <CheckboxMUI
+              name={name}
+              sx={{ marginTop: '-2px' }}
+              checked={internalValue}
+              color="primary"
+              onChange={(e) => {
+                setInternalValue(e.target.checked);
+                onChange && onChange(name, e.target.checked, true);
+              }}
+              {...props}
+            />
+          </Box>
+        }
+        label={
+          <Typography
+            component="span"
+            sx={{
+              fontSize: '14px',
+              marginLeft: '-3px',
+              marginTop: '2px',
+              fontWeight: 400,
+              color: error ? '#B80025' : '#000'
+            }}
+          >
+            {label}
+          </Typography>
+        }
+      />
+      {error && (
+        <Typography
+          sx={{
+            marginTop: -0.5,
+            color: '#B80025',
+            fontWeight: 400,
+            fontSize: '10px'
+          }}
+        >
+          {error}
+        </Typography>
+      )}
+    </FormControl>
+  );
+};
+
+export default Checkbox;

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

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

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

@@ -0,0 +1,184 @@
+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

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

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

@@ -0,0 +1,154 @@
+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

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

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

@@ -0,0 +1,98 @@
+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

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

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,126 @@
+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

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

package/src/components/Link/Link.tsx

@@ -0,0 +1,11 @@
+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

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

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,116 @@
+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;

package/src/components/Pagination/index.ts

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

package/src/components/Text/Text.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Typography, TypographyProps } from '@mui/material';
+
+interface Props extends Omit<TypographyProps, 'variant'> {
+  variant?:
+    | 'bigNumber'
+    | 'body1Regular'
+    | 'body1Medium'
+    | 'body1Bold'
+    | 'body2Regular'
+    | 'body2Medium'
+    | 'body2Bold'
+    | 'caption'
+    | 'buttonNotif'
+    | 'header1'
+    | 'header2'
+    | 'header3'
+    | 'header4';
+  component?: any;
+}
+
+const Text = (props: Props) => (
+  <Typography color="greyXDark" {...(props as TypographyProps)} />
+);
+
+export default Text;

package/src/components/Text/index.ts

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

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { IconButton, Tooltip as TooltipMui, TooltipProps } from '@mui/material';
+import Text from '../Text/Text';
+
+interface Props extends Omit<TooltipProps, 'icon' | 'children'> {
+  title: string;
+  children: ReactNode;
+}
+
+const Tooltip = ({ title, children, ...props }: Props) => (
+  <TooltipMui
+    title={
+      <Text variant="body2Regular" color="white">
+        {title}
+      </Text>
+    }
+    {...props}
+    className="DsTooltip-root"
+  >
+    <IconButton
+      sx={{
+        padding: 0,
+        '& .MuiBox-root': {
+          width: 0
+        }
+      }}
+    >
+      {children}
+    </IconButton>
+  </TooltipMui>
+);
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export { default as Text } from './Text';
+export { default as Link } from './Link';
+export { default as Button } from './Button';
+export { default as TextField } from './Form/TextField';
+export { default as Select } from './Form/Select';
+export { default as MultiSelect } from './Form/MultiSelect';
+export { default as Checkbox } from './Form/Checkbox';
+export { default as Accordion } from './Accordion';
+export { default as IconProvider } from './Icon/Icon';
+export { default as Pagination } from './Pagination';
+export { default as Chip } from './Chip/Chip';
+export { default as EmbeddedNotification } from './EmbbededNotification/EmbeddedNotification';
+export { default as Tooltip } from './Tooltip/Tooltip';

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export {
+  default as DesignSystemProvider,
+  DesignSystemContext,
+  type DesignSystemContextValues
+} from './DesignSystemProvider';