@groupeactual/ui-kit 0.4.24 → 0.4.26

package/dist/index.d.ts

@@ -1,35 +1,35 @@
 /// <reference types="react" />
-import { TypographyProps, LinkProps } from '@mui/material';
+import { TypographyProps, LinkProps, BoxProps as BoxProps$1, TooltipProps } from '@mui/material';
+import React, { ReactNode, FocusEventHandler, MouseEventHandler, PropsWithChildren } from 'react';
 import { ButtonProps } from '@mui/material/Button';
-import * as react from 'react';
-import { FocusEventHandler, ReactNode, MouseEventHandler, PropsWithChildren } from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { InputProps } from '@mui/material/Input/Input';
+import { SelectProps } from '@mui/material/Select';
 import { CheckboxProps } from '@mui/material/Checkbox';
 import { AccordionProps } from '@mui/material/Accordion';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { BoxProps } from '@mui/material/Box';
 import { ChipProps } from '@mui/material/Chip';
 
-interface Props$8 extends Omit<TypographyProps, 'variant'> {
+interface Props$c extends Omit<TypographyProps, 'variant'> {
     variant?: 'bigNumber' | 'body1Regular' | 'body1Medium' | 'body1Bold' | 'body2Regular' | 'body2Medium' | 'body2Bold' | 'caption' | 'buttonNotif' | 'header1' | 'header2' | 'header3' | 'header4';
     component?: any;
 }
-declare const Text: (props: Props$8) => JSX.Element;
+declare const Text: (props: Props$c) => JSX.Element;
 
-interface Props$7 extends Omit<LinkProps, 'variant'> {
+interface Props$b extends Omit<LinkProps, 'variant'> {
     variant?: 'link1' | 'link2';
     component?: any;
 }
-declare const Link: (props: Props$7) => JSX.Element;
+declare const Link: (props: Props$b) => JSX.Element;
 
-interface Props$6 extends Omit<ButtonProps, 'variant'> {
+interface Props$a extends Omit<ButtonProps, 'variant' | 'children'> {
     variant?: 'primary' | 'secondary';
-    component?: any;
+    children?: ReactNode;
 }
-declare const Button: (props: Props$6) => JSX.Element;
+declare const Button: ({ variant, children, ...props }: Props$a) => JSX.Element;
 
-interface Props$5 extends Omit<TextFieldProps, 'error'> {
+interface Props$9 extends Omit<TextFieldProps, 'error'> {
     error?: string;
     onBlur?: FocusEventHandler<unknown>;
     onChange?: InputProps['onChange'];
@@ -38,29 +38,52 @@ interface Props$5 extends Omit<TextFieldProps, 'error'> {
     name: string;
     placeholder?: string;
     disabled?: boolean;
-    isValid?: boolean;
     endAdornment?: ReactNode;
     maxLength?: number;
 }
-declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, isValid, placeholder, maxLength, ...props }: Props$5) => JSX.Element;
+declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, maxLength, ...props }: Props$9) => JSX.Element;
 
-interface Props$4 {
+interface Props$8<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;
+}
+declare const Select: <T extends {}>({ label, defaultValue, options, color, error, placeholder, onChange, getOptionLabel, helperText, onBlur, width, ...props }: Props$8<T>) => JSX.Element;
+
+interface Props$7<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;
+}
+declare const MultiSelect: <T extends {}>({ label, options, color, error, placeholder, width, defaultValue, getOptionLabel, helperText, onChange, onBlur, ...props }: Props$7<T>) => JSX.Element;
+
+interface Props$6 {
     name: string;
     value: boolean;
     label: string;
     onChange?: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
     error?: string;
 }
-declare const Checkbox: ({ name, value, error, label, onChange, ...props }: CheckboxProps & Props$4) => JSX.Element;
+declare const Checkbox: ({ name, value, error, label, onChange, ...props }: CheckboxProps & Props$6) => JSX.Element;
 
-interface Props$3 extends AccordionProps {
+interface Props$5 extends AccordionProps {
     icon: ReactNode;
     title?: string;
     summaryHeight?: number;
     expanded?: boolean;
     onClick?: MouseEventHandler;
 }
-declare const Accordion: ({ icon, title, summaryHeight, expanded, onClick, children, ...props }: Props$3) => JSX.Element;
+declare const Accordion: ({ icon, title, summaryHeight, expanded, onClick, children, ...props }: Props$5) => JSX.Element;
 
 declare const FontSizes: {
     xs: number;
@@ -71,15 +94,15 @@ declare const FontSizes: {
     xxl: number;
     xxxl: number;
 };
-interface Props$2 {
+interface Props$4 {
     variant?: 'square' | 'none';
     icon: IconDefinition;
     color?: string;
     size?: number | keyof typeof FontSizes;
 }
-declare const Icon: ({ variant, icon, color, size, ...props }: Props$2 & BoxProps) => JSX.Element;
+declare const IconProvider: ({ variant, icon, color, size, ...props }: Props$4 & BoxProps) => JSX.Element;
 
-interface Props$1 {
+interface Props$3 {
     totalString: string;
     totalPerPageString: string;
     totalPages: number;
@@ -89,20 +112,33 @@ interface Props$1 {
     page?: number;
     limit?: number;
 }
-declare const Pagination: ({ totalString, totalPerPageString, totalPages, limitsPerPage, setLimit, setPage, page, limit }: Props$1) => JSX.Element;
+declare const Pagination: ({ totalString, totalPerPageString, totalPages, limitsPerPage, setLimit, setPage, page, limit }: Props$3) => JSX.Element;
 
 declare const Chip: (props: ChipProps) => JSX.Element;
 
+interface Props$2 extends BoxProps$1 {
+    variant: 'warning' | 'error' | 'success' | 'infos';
+    title: string;
+    text?: ReactNode;
+}
+declare const EmbeddedNotification: ({ title, text, variant, ...props }: Props$2) => JSX.Element;
+
+interface Props$1 extends Omit<TooltipProps, 'icon' | 'children'> {
+    title: string;
+    children: ReactNode;
+}
+declare const Tooltip: ({ title, children, ...props }: Props$1) => JSX.Element;
+
 type Theme = 'Default' | 'Ep';
 interface DesignSystemContextValues {
     isDarkTheme: boolean;
     themeName: Theme;
     toggleDarkTheme: () => void;
 }
-declare const DesignSystemContext: react.Context<DesignSystemContextValues>;
+declare const DesignSystemContext: React.Context<DesignSystemContextValues>;
 interface Props {
     name?: Theme;
 }
 declare const DesignSystemProvider: ({ children, name: themeName }: PropsWithChildren<Props>) => JSX.Element;
 
-export { Accordion, Button, Checkbox, Chip, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider, Icon as IconProvider, Link, Pagination, Text, TextField };
+export { Accordion, Button, Checkbox, Chip, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider, EmbeddedNotification, IconProvider, Link, MultiSelect, Pagination, Select, Text, TextField, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.4.24",
+  "version": "0.4.26",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
     "@babel/core": "^7.20.5",
@@ -22,6 +22,7 @@
     "eslint-config-standard-with-typescript": "^23.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jsx-a11y": "^6.0.0",
     "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
@@ -49,8 +50,10 @@
     "@emotion/is-prop-valid": "^1.2.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/fontawesome-common-types": "^6.3.0",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.3.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@groupeactual/design-tokens": "^0.3.0",
     "@mui/base": "^5.0.0-alpha.108",
     "@mui/material": "^5.10.16",
@@ -73,6 +76,8 @@
   "scripts": {
     "build": "rollup -c",
     "build:watch": "rollup -c -w",
-    "dev": "npm run build:watch"
+    "dev": "npm run build:watch",
+    "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
+    "lint": "npm run eslint"
   }
 }

package/src/DesignSystemProvider.tsx

@@ -1,4 +1,9 @@
-import { PropsWithChildren, useState, createContext, useContext } from 'react';
+import React, {
+  PropsWithChildren,
+  useState,
+  createContext,
+  useContext
+} from 'react';
 import { useMaterialThemeTokens } from '@groupeactual/design-tokens';
 import { createTheme, ThemeProvider } from '@mui/material';
 
@@ -16,7 +21,9 @@ export interface DesignSystemContextValues {
 export const DesignSystemContext = createContext<DesignSystemContextValues>({
   isDarkTheme: false,
   themeName: 'Default',
-  toggleDarkTheme: () => {}
+  toggleDarkTheme: () => {
+    return;
+  }
 });
 
 interface Props {

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,9 @@
-import { MouseEventHandler, ReactNode, useEffect, useState } from 'react';
+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';

package/src/components/Button/Button.tsx

@@ -1,13 +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'> {
+interface Props extends Omit<ButtonProps, 'variant' | 'children'> {
   variant?: 'primary' | 'secondary';
-  component?: any;
+  children?: ReactNode;
 }
 
-const Button = (props: Props) => {
-  return <ButtonMUI {...(props as ButtonProps)} />;
+const Button = ({ variant, children, ...props }: Props) => {
+  return (
+    <ButtonMUI variant={variant as 'text'} {...props}>
+      {children}
+    </ButtonMUI>
+  );
 };
 
 export default Button;

package/src/components/Chip/Chip.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ChipProps as ChipPropsMUI } from '@mui/material/Chip';
 import { Chip as ChipMUI } from '@mui/material';
 

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import CheckboxMUI, { CheckboxProps } from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';

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

@@ -0,0 +1,176 @@
+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';
+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}
+                  label={getOptionLabel(selectedOption)}
+                  onDelete={() =>
+                    !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';