@groupeactual/ui-kit 0.4.30 → 0.4.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.4.30",
+  "version": "0.4.32",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
     "@babel/core": "^7.20.5",
@@ -37,16 +37,7 @@
     "sass": "^1.56.1",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
-    "typescript": "^4.9.3"
-  },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "types": "dist/index.d.ts",
-  "dependencies": {
+    "typescript": "^4.9.3",
     "@emotion/is-prop-valid": "^1.2.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
@@ -69,6 +60,12 @@
     "tslib": "^2.4.1",
     "webpack": "^5.75.0"
   },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/src/DesignSystemProvider.tsx

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

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

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

package/src/components/Button/Button.tsx

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

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

package/src/components/Chip/Chip.tsx

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

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

package/src/components/EmbbededNotification/EmbeddedNotification.tsx

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

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

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

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

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

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';