@groupeactual/ui-kit 0.4.21 → 0.4.23

package/dist/index.d.ts

@@ -2,35 +2,37 @@
 import { TypographyProps, LinkProps } from '@mui/material';
 import { ButtonProps } from '@mui/material/Button';
 import * as react from 'react';
-import { FocusEventHandler, ChangeEventHandler, ReactNode, PropsWithChildren } from 'react';
+import { FocusEventHandler, ReactNode, MouseEventHandler, PropsWithChildren } from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
+import { InputProps } from '@mui/material/Input/Input';
 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$7 extends Omit<TypographyProps, 'variant'> {
+interface Props$8 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$7) => JSX.Element;
+declare const Text: (props: Props$8) => JSX.Element;
 
-interface Props$6 extends Omit<LinkProps, 'variant'> {
+interface Props$7 extends Omit<LinkProps, 'variant'> {
     variant?: 'link1' | 'link2';
     component?: any;
 }
-declare const Link: (props: Props$6) => JSX.Element;
+declare const Link: (props: Props$7) => JSX.Element;
 
-interface Props$5 extends Omit<ButtonProps, 'variant'> {
+interface Props$6 extends Omit<ButtonProps, 'variant'> {
     variant?: 'primary' | 'secondary';
     component?: any;
 }
-declare const Button: (props: Props$5) => JSX.Element;
+declare const Button: (props: Props$6) => JSX.Element;
 
-interface Props$4 {
+interface Props$5 extends Omit<TextFieldProps, 'error'> {
     error?: string;
-    onBlur: FocusEventHandler<unknown>;
-    onChange: ChangeEventHandler<unknown>;
+    onBlur?: FocusEventHandler<unknown>;
+    onChange?: InputProps['onChange'];
     label: string;
     value: string;
     name: string;
@@ -40,24 +42,25 @@ interface Props$4 {
     endAdornment?: ReactNode;
     maxLength?: number;
 }
-declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, isValid, placeholder, maxLength, ...props }: Omit<TextFieldProps, 'error'> & Props$4) => JSX.Element;
+declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, isValid, placeholder, maxLength, ...props }: Props$5) => JSX.Element;
 
-interface Props$3 {
+interface Props$4 {
     name: string;
     value: boolean;
     label: string;
-    onChange: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
+    onChange?: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
     error?: string;
 }
-declare const Checkbox: ({ name, value, error, label, onChange, ...props }: CheckboxProps & Props$3) => JSX.Element;
+declare const Checkbox: ({ name, value, error, label, onChange, ...props }: CheckboxProps & Props$4) => JSX.Element;
 
-interface Props$2 extends Omit<AccordionProps, 'children'> {
+interface Props$3 extends AccordionProps {
     icon: ReactNode;
-    content: ReactNode;
     title?: string;
     summaryHeight?: number;
+    expanded?: boolean;
+    onClick?: MouseEventHandler;
 }
-declare const Accordion: ({ icon, title, content, summaryHeight, ...props }: Props$2) => JSX.Element;
+declare const Accordion: ({ icon, title, summaryHeight, expanded, onClick, children, ...props }: Props$3) => JSX.Element;
 
 declare const FontSizes: {
     xs: number;
@@ -68,13 +71,27 @@ declare const FontSizes: {
     xxl: number;
     xxxl: number;
 };
-interface Props$1 {
+interface Props$2 {
     variant?: 'square' | 'none';
     icon: IconDefinition;
     color?: string;
     size?: number | keyof typeof FontSizes;
 }
-declare const Icon: ({ variant, icon, color, size, ...props }: Props$1 & BoxProps) => JSX.Element;
+declare const Icon: ({ variant, icon, color, size, ...props }: Props$2 & BoxProps) => JSX.Element;
+
+interface Props$1 {
+    totalString: string;
+    totalPerPageString: string;
+    totalPages: number;
+    limitsPerPage: number[];
+    setLimit?: (limit: number) => void;
+    setPage?: (page: number) => void;
+    page?: number;
+    limit?: number;
+}
+declare const Pagination: ({ totalString, totalPerPageString, totalPages, limitsPerPage, setLimit, setPage, page, limit }: Props$1) => JSX.Element;
+
+declare const Chip: (props: ChipProps) => JSX.Element;
 
 type Theme = 'Default' | 'Ep';
 interface DesignSystemContextValues {
@@ -88,4 +105,4 @@ interface Props {
 }
 declare const DesignSystemProvider: ({ children, name: themeName }: PropsWithChildren<Props>) => JSX.Element;
 
-export { Accordion, Button, Checkbox, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider, Icon as IconProvider, Link, Text, TextField };
+export { Accordion, Button, Checkbox, Chip, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider, Icon as IconProvider, Link, Pagination, Text, TextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.4.21",
+  "version": "0.4.23",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
     "@babel/core": "^7.20.5",

package/src/components/Accordion/Accordion.tsx

@@ -1,25 +1,43 @@
-import { ReactNode } from 'react';
+import { 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 Omit<AccordionProps, 'children'> {
+interface Props extends AccordionProps {
   icon: ReactNode;
-  content: ReactNode;
   title?: string;
   summaryHeight?: number;
+  expanded?: boolean;
+  onClick?: MouseEventHandler;
 }
 
 const Accordion = ({
   icon,
   title,
-  content,
   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
@@ -40,7 +58,7 @@ const Accordion = ({
           borderColor: 'greyLightDefaultBorder'
         }}
       >
-        {content}
+        {children}
       </AccordionDetails>
     </AccordionMui>
   );

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,8 @@
+import { ChipProps as ChipPropsMUI } from '@mui/material/Chip';
+import { Chip as ChipMUI } from '@mui/material';
+
+const Chip = (props: ChipPropsMUI) => {
+  return <ChipMUI {...(props as ChipPropsMUI)} />;
+};
+
+export default Chip;

package/src/components/Chip/index.ts

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

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

@@ -10,7 +10,7 @@ interface Props {
   name: string;
   value: boolean;
   label: string;
-  onChange: (
+  onChange?: (
     field: string,
     value: any,
     shouldValidate?: boolean | undefined
@@ -46,7 +46,7 @@ const Checkbox = ({
               color="primary"
               onChange={(e) => {
                 setInternalValue(e.target.checked);
-                onChange(name, e.target.checked, true);
+                onChange && onChange(name, e.target.checked, true);
               }}
               {...props}
             />

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

@@ -1,17 +1,12 @@
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-  useEffect,
-  useState
-} from 'react';
+import { FocusEventHandler, ReactNode, useEffect, useState } from 'react';
 
 import MuiTextField, { TextFieldProps } from '@mui/material/TextField';
+import { InputProps as StandardInputProps } from '@mui/material/Input/Input';
 
-interface Props {
+interface Props extends Omit<TextFieldProps, 'error'> {
   error?: string;
-  onBlur: FocusEventHandler<unknown>;
-  onChange: ChangeEventHandler<unknown>;
+  onBlur?: FocusEventHandler<unknown>;
+  onChange?: StandardInputProps['onChange'];
   label: string;
   value: string;
   name: string;
@@ -34,7 +29,7 @@ const TextField = ({
   placeholder = '',
   maxLength,
   ...props
-}: Omit<TextFieldProps, 'error'> & Props): JSX.Element => {
+}: Props) => {
   const [internalValue, setInternalValue] = useState(value);
   useEffect(() => {
     if (value !== internalValue) {
@@ -55,10 +50,14 @@ const TextField = ({
       onClick={(e) => e.stopPropagation()}
       onChange={(e) => {
         setInternalValue(e.currentTarget.value);
-        onChange(e);
+        if (onChange) {
+          onChange(e);
+        }
       }}
       onBlur={(e) => {
-        onBlur(e);
+        if (onBlur) {
+          onBlur(e);
+        }
       }}
       error={!!error}
       disabled={disabled}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,110 @@
+import { 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={{ height: '32px', width: '65px' }}
+              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/index.ts

@@ -5,3 +5,5 @@ export { default as TextField } from './Form/TextField';
 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';