@groupeactual/ui-kit 1.0.27-beta.4 → 1.0.27-beta.5

package/dist/es/types/components/Datatable/Datatable.d.ts

@@ -0,0 +1,16 @@
+import { Column, Row } from './datatable.interface';
+interface Props<T extends Row> {
+    values: T[];
+    columns: Column<T>[];
+    withHeader?: boolean;
+    withPagination?: boolean;
+    defaultRowPerPage?: number;
+    totalPerPageTrad?: string;
+    totalTrad?: string;
+    limitsPerPageArray?: number[];
+}
+declare const Datatable: {
+    <T extends Row>({ values, columns, withHeader, withPagination, defaultRowPerPage, totalPerPageTrad, totalTrad, limitsPerPageArray }: Props<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Datatable;

package/dist/es/types/components/Datatable/datatable.helper.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Compares two objects based on a specified property in descending order.
+ *
+ * @param a - The first object in the comparison.
+ * @param b - The second object in the comparison.
+ * @param orderBy - The property of the objects to base the comparison on.
+ * @returns A number indicating the order of the objects.
+ */
+export declare const descendingComparator: <T>(a: T, b: T, orderBy?: string) => 0 | 1 | -1;

package/dist/es/types/components/Datatable/datatable.interface.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type Order = 'asc' | 'desc';
+export interface Column<T> {
+    name: string;
+    render: (record: T) => JSX.Element;
+    title?: string;
+    width?: string;
+    sortable?: boolean;
+}
+export interface Row {
+    details?: ReactNode;
+}

package/dist/es/types/components/Datatable/index.d.ts

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

package/dist/es/types/components/Pagination/Pagination.d.ts

@@ -1,15 +1,15 @@
 interface Props {
     totalString: string;
     totalPerPageString: string;
-    totalPages: number;
     limitsPerPage: number[];
+    totalRows: 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): import("react/jsx-runtime").JSX.Element;
+    ({ totalString, totalPerPageString, limitsPerPage, setLimit, setPage, page, totalRows, limit }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Pagination;

package/dist/es/types/components/Pagination/pagination.helper.d.ts

@@ -0,0 +1 @@
+export declare const getTotalPages: (totalRows: number, limitPerPage: number) => number;

package/dist/es/types/components/index.d.ts

@@ -23,3 +23,4 @@ export { default as BannerNotification } from './BannerNotification/BannerNotifi
 export { default as Stepper } from './Stepper/Stepper';
 export { default as Switch } from './Form/Switch/Switch';
 export { default as DatePicker } from './Form/DatePicker';
+export { default as Datatable } from './Datatable/Datatable';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.0.27-beta.4",
+  "version": "1.0.27-beta.5",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
@@ -54,7 +54,7 @@
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@groupeactual/design-tokens": "1.0.27-beta.4"
+    "@groupeactual/design-tokens": "1.0.27-beta.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/components/Datatable/Datatable.tsx

@@ -0,0 +1,174 @@
+import { useMemo, useState } from 'react';
+
+import { faArrowDown, faArrowUp } from '@fortawesome/pro-regular-svg-icons';
+import { DatatableStyle } from '@groupeactual/design-tokens';
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableSortLabel,
+  styled,
+  useTheme
+} from '@mui/material';
+
+import IconProvider from '../IconProvider';
+import Pagination from '../Pagination';
+import Text from '../Text';
+import { descendingComparator } from './datatable.helper';
+import { Column, Order, Row } from './datatable.interface';
+
+interface Props<T extends Row> {
+  values: T[];
+  columns: Column<T>[];
+  withHeader?: boolean;
+  withPagination?: boolean;
+  defaultRowPerPage?: number;
+  totalPerPageTrad?: string;
+  totalTrad?: string;
+  limitsPerPageArray?: number[];
+}
+
+const Datatable = <T extends Row>({
+  values,
+  columns,
+  withHeader = true,
+  withPagination = false,
+  defaultRowPerPage = 5,
+  totalPerPageTrad = 'résultats par page',
+  totalTrad = 'résultats',
+  limitsPerPageArray = [3, 5, 10, 20]
+}: Props<T>) => {
+  const theme = useTheme();
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState<string>();
+
+  const isAsc = order === 'asc';
+
+  const [page, setPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(defaultRowPerPage);
+
+  const StyledDatatable = useMemo(
+    () => styled(Box)(DatatableStyle(theme)),
+    [theme]
+  );
+
+  const visibleRows = useMemo(() => {
+    const sortedValues = values.sort(
+      order === 'desc'
+        ? (a, b) => descendingComparator(a, b, orderBy)
+        : (a, b) => -descendingComparator(a, b, orderBy)
+    );
+
+    return withPagination
+      ? sortedValues.slice(
+          (page - 1) * rowsPerPage,
+          (page - 1) * rowsPerPage + rowsPerPage
+        )
+      : sortedValues;
+  }, [page, rowsPerPage, order, orderBy, withPagination]);
+
+  return (
+    <StyledDatatable>
+      {values.length > 0 && (
+        <TableContainer>
+          <Table>
+            {withHeader && (
+              <TableHead>
+                <TableRow>
+                  {columns.map(({ name, title = '', sortable = false }) => {
+                    const isOrderBy = orderBy === name;
+                    return (
+                      <TableCell
+                        key={name}
+                        sortDirection={orderBy === name ? order : false}
+                      >
+                        {(sortable && (
+                          <TableSortLabel
+                            active={orderBy === name}
+                            onClick={() => {
+                              setOrder(isAsc && isOrderBy ? 'desc' : 'asc');
+                              setOrderBy(name);
+                            }}
+                            IconComponent={() => (
+                              <>
+                                <IconProvider
+                                  icon={faArrowUp}
+                                  color={
+                                    isAsc && isOrderBy
+                                      ? '#000'
+                                      : theme.palette.greyLightDefaultBorder
+                                  }
+                                />
+                                <IconProvider
+                                  icon={faArrowDown}
+                                  color={
+                                    !isAsc && isOrderBy
+                                      ? '#000'
+                                      : theme.palette.greyLightDefaultBorder
+                                  }
+                                />
+                              </>
+                            )}
+                          >
+                            <Text>{title}</Text>
+                          </TableSortLabel>
+                        )) || <Text>{title}</Text>}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              </TableHead>
+            )}
+            <TableBody>
+              {visibleRows.map((record, index) => (
+                <>
+                  <TableRow
+                    sx={{
+                      '& > *': {
+                        borderBottom: record.details ? 'unset' : 'default'
+                      }
+                    }}
+                    key={index}
+                  >
+                    {columns.map(({ name, width, render }) => (
+                      <TableCell key={name} width={width}>
+                        {render(record)}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                  {record.details && (
+                    <TableRow>
+                      <TableCell colSpan={columns.length}>
+                        {record.details}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+      {withPagination && (
+        <Pagination
+          page={page}
+          limit={rowsPerPage}
+          setPage={setPage}
+          setLimit={setRowsPerPage}
+          limitsPerPage={limitsPerPageArray}
+          totalPerPageString={totalPerPageTrad}
+          totalRows={values.length}
+          totalString={totalTrad}
+        />
+      )}
+    </StyledDatatable>
+  );
+};
+
+Datatable.displayName = 'Datatable';
+
+export default Datatable;

package/src/components/Datatable/datatable.helper.ts

@@ -0,0 +1,15 @@
+/**
+ * Compares two objects based on a specified property in descending order.
+ *
+ * @param a - The first object in the comparison.
+ * @param b - The second object in the comparison.
+ * @param orderBy - The property of the objects to base the comparison on.
+ * @returns A number indicating the order of the objects.
+ */
+export const descendingComparator = <T>(a: T, b: T, orderBy?: string) => {
+  if (!orderBy) {
+    return 0;
+  }
+
+  return b[orderBy] < a[orderBy] ? -1 : b[orderBy] > a[orderBy] ? 1 : 0;
+};

package/src/components/Datatable/datatable.interface.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+export type Order = 'asc' | 'desc';
+
+export interface Column<T> {
+  name: string;
+  render: (record: T) => JSX.Element;
+  title?: string;
+  width?: string;
+  sortable?: boolean;
+}
+
+export interface Row {
+  details?: ReactNode;
+}

package/src/components/Datatable/index.ts

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

package/src/components/Pagination/Pagination.tsx

@@ -1,23 +1,23 @@
 import React, { useEffect, useMemo, useState } from 'react';
+
+import { PaginationStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   Divider,
   Pagination as MUIPagination,
-  MenuItem,
-  Select,
   styled,
   useTheme
 } from '@mui/material';
 
-import { PaginationStyle } from '@groupeactual/design-tokens';
-
+import Select from '../Form/Select';
 import Text from '../Text';
+import { getTotalPages } from './pagination.helper';
 
 interface Props {
   totalString: string;
   totalPerPageString: string;
-  totalPages: number;
   limitsPerPage: number[];
+  totalRows: number;
   setLimit?: (limit: number) => void;
   setPage?: (page: number) => void;
   page?: number;
@@ -27,11 +27,11 @@ interface Props {
 const Pagination = ({
   totalString,
   totalPerPageString,
-  totalPages,
   limitsPerPage,
   setLimit,
   setPage,
   page = 1,
+  totalRows,
   limit
 }: Props) => {
   const theme = useTheme();
@@ -44,6 +44,28 @@ const Pagination = ({
   const [internalLimit, setInternalLimit] = useState<number>(
     limit ?? limitsPerPage[0]
   );
+
+  const displayablePages = getTotalPages(totalRows, internalLimit);
+
+  const changePage = (newPage: number) => {
+    setInternalPage(newPage);
+    setPage?.(newPage);
+  };
+
+  const changeLimit = (newLimit: number) => {
+    setInternalLimit(newLimit);
+    setLimit?.(newLimit);
+  };
+
+  const handleChangeLimit = (newLimit: number) => {
+    const newDisplayablePages = getTotalPages(totalRows, newLimit);
+
+    if (newDisplayablePages < displayablePages) {
+      changePage(newDisplayablePages);
+    }
+    changeLimit(newLimit);
+  };
+
   useEffect(() => {
     if (page !== internalPage) {
       setInternalPage(page);
@@ -57,41 +79,39 @@ const Pagination = ({
   }, [limit]);
 
   return (
-    <>
+    <Box
+      display="flex"
+      flexDirection="row"
+      justifyContent="flex-end"
+      sx={{
+        padding: '12px 8px'
+      }}
+    >
       <Box display="flex">
         <Text color="greyXDark" variant="body1Bold" pt="10px" pr="16px">
-          {totalString}
+          {totalRows} {totalString}
         </Text>
-        {totalPages > 1 && (
+        {displayablePages > 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
-              }}
+              label=""
               className="dac-select-label"
               labelId="select-label"
               value={internalLimit}
-              onChange={(event) => {
-                setInternalLimit(Number(event?.target?.value));
-                if (setLimit) {
-                  setLimit(Number(event?.target?.value));
+              onChange={handleChangeLimit}
+              options={limitsPerPage}
+              getRenderValue={(value) => value.toString()}
+              width={75}
+              sx={{
+                '&.MuiInputBase-root': {
+                  height: '32px !important'
                 }
               }}
-            >
-              {limitsPerPage.map((limit, id) => (
-                <MenuItem key={id} value={limit}>
-                  {limit}
-                </MenuItem>
-              ))}
-            </Select>
+            />
             <Text
               color="greyXDark"
               variant="body1Regular"
@@ -108,23 +128,20 @@ const Pagination = ({
           </>
         )}
       </Box>
-      {totalPages > 1 && (
+      {displayablePages > 1 && (
         <Box display="flex" pr="4px">
           <StyledPagination
             variant="outlined"
             shape="rounded"
-            count={totalPages}
+            count={displayablePages}
             page={internalPage}
-            onChange={(event: React.ChangeEvent<unknown>, value: number) => {
-              setInternalPage(value);
-              if (setPage) {
-                setPage(value);
-              }
-            }}
+            onChange={(_: React.ChangeEvent<unknown>, value: number) =>
+              changePage(value)
+            }
           />
         </Box>
       )}
-    </>
+    </Box>
   );
 };
 

package/src/components/Pagination/pagination.helper.ts

@@ -0,0 +1,2 @@
+export const getTotalPages = (totalRows: number, limitPerPage: number) =>
+  Math.ceil(totalRows / limitPerPage);

package/src/components/Stepper/Step.tsx

@@ -91,7 +91,8 @@ export const StepComponent = ({
                     palette.greyLightDefaultBorder
                   }
                   sx={{
-                    background: palette.greyXLight
+                    background: palette.white,
+                    borderRadius: '50%',
                   }}
                 />
                 <Text

package/src/components/index.ts

@@ -23,3 +23,4 @@ export { default as BannerNotification } from './BannerNotification/BannerNotifi
 export { default as Stepper } from './Stepper/Stepper';
 export { default as Switch } from './Form/Switch/Switch';
 export { default as DatePicker } from './Form/DatePicker';
+export { default as Datatable } from './Datatable/Datatable';