@groupeactual/ui-kit 1.7.9 → 2.0.0-beta.0

package/src/components/Pagination/Pagination.tsx

@@ -1,14 +1,7 @@
-import React, { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import React, { ChangeEvent, useEffect, useState } from 'react';
 
 import { faCaretDown } from '@fortawesome/pro-solid-svg-icons';
-import { PaginationStyle } from '@groupeactual/design-tokens';
-import {
-  Box,
-  Divider,
-  Pagination as MUIPagination,
-  styled,
-  useTheme,
-} from '@mui/material';
+import { Box, Divider, Pagination as MUIPagination } from '@mui/material';
 
 import Select from '@/components/Form/Select';
 import Text from '@/components/Text';
@@ -23,126 +16,146 @@ interface Props {
   limitsPerPage?: number[];
   page?: number;
   limit?: number;
+  disabled?: boolean;
   setPage?: (_page: number) => void;
   setLimit?: (_limit: number) => void;
 }
 
-const Pagination = ({
-  totalString,
-  totalPerPageString,
-  hideTotal = false,
-  limitsPerPage = [5, 10, 20],
-  page = 1,
-  totalRows,
-  limit,
-  setLimit,
-  setPage,
-}: Props) => {
-  const theme = useTheme();
-  const StyledPagination = useMemo(
-    () => styled(MUIPagination)(PaginationStyle(theme)),
-    [theme],
-  );
+const Pagination = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      totalString,
+      totalPerPageString,
+      hideTotal = false,
+      limitsPerPage = [5, 10, 20],
+      page = 1,
+      totalRows,
+      limit,
+      disabled,
+      setLimit,
+      setPage,
+    },
+    ref,
+  ) => {
+    const [internalPage, setInternalPage] = useState<number>(page);
+    const [internalLimit, setInternalLimit] = useState<number>(
+      limit ?? limitsPerPage[0],
+    );
 
-  const [internalPage, setInternalPage] = useState<number>(page);
-  const [internalLimit, setInternalLimit] = useState<number>(
-    limit ?? limitsPerPage[0],
-  );
+    const displayablePages = getTotalPages(totalRows, internalLimit);
 
-  const displayablePages = getTotalPages(totalRows, internalLimit);
+    const changePage = (newPage: number) => {
+      setInternalPage(newPage);
+      setPage?.(newPage);
+    };
 
-  const changePage = (newPage: number) => {
-    setInternalPage(newPage);
-    setPage?.(newPage);
-  };
+    const changeLimit = (newLimit: number) => {
+      setInternalLimit(newLimit);
+      setLimit?.(newLimit);
+    };
 
-  const changeLimit = (newLimit: number) => {
-    setInternalLimit(newLimit);
-    setLimit?.(newLimit);
-  };
+    const handleChangeLimit = (newLimit: number) => {
+      changePage(1);
+      changeLimit(newLimit);
+    };
 
-  const handleChangeLimit = (newLimit: number) => {
-    changePage(1);
-    changeLimit(newLimit);
-  };
+    useEffect(() => {
+      if (page !== internalPage) {
+        setInternalPage(page);
+      }
+    }, [page]);
 
-  useEffect(() => {
-    if (page !== internalPage) {
-      setInternalPage(page);
-    }
-  }, [page]);
+    useEffect(() => {
+      if (limit && limit !== internalLimit) {
+        setInternalLimit(limit);
+      }
+    }, [limit]);
 
-  useEffect(() => {
-    if (limit && limit !== internalLimit) {
-      setInternalLimit(limit);
-    }
-  }, [limit]);
-
-  return (
-    <Box
-      display="flex"
-      flexDirection="row"
-      justifyContent="flex-end"
-      alignItems="center"
-      sx={{
-        paddingTop: '16px',
-        paddingBottom: '24px',
-      }}
-    >
-      <Box display="flex" alignItems="center">
-        {!hideTotal && (
-          <>
-            <Text variant="body1Medium">
-              {totalRows} {totalString}
-            </Text>
-            <Divider
-              orientation="vertical"
-              sx={{
-                color: 'greyXLight',
-                width: '1px',
-                height: '33px',
-                marginX: '16px',
-              }}
-            />
-          </>
-        )}
-        <Select
-          className="dac-select-label"
-          labelId="select-label"
-          value={internalLimit}
-          inputProps={{ MenuProps: { disableScrollLock: true } }}
-          onChange={handleChangeLimit}
-          options={limitsPerPage}
-          getRenderValue={(value) => value.toString()}
-          popupIcon={faCaretDown}
-          width={60}
-        />
-        <Text variant="body1" pl="8px">
-          {totalPerPageString}
-        </Text>
-        <Divider
-          orientation="vertical"
-          sx={{
-            color: 'greyXLight',
-            width: '1px',
-            height: '33px',
-            marginX: '16px',
-          }}
-        />
-      </Box>
-      <Box display="flex" pr="4px">
-        <StyledPagination
-          variant="outlined"
-          shape="rounded"
-          count={displayablePages}
-          page={internalPage}
-          onChange={(_: ChangeEvent<unknown>, value: number) =>
-            changePage(value)
-          }
-        />
+    return (
+      <Box
+        ref={ref}
+        display="flex"
+        flexDirection="row"
+        justifyContent="flex-end"
+        alignItems="center"
+        sx={{
+          paddingTop: '16px',
+          paddingBottom: '24px',
+        }}
+        data-testid="ds-pagination-container"
+      >
+        <Box
+          display="flex"
+          alignItems="center"
+          data-testid="ds-pagination-info"
+        >
+          {!hideTotal && (
+            <>
+              <Text variant="body1Medium" data-testid="ds-pagination-total">
+                {totalRows} {totalString}
+              </Text>
+              <Divider
+                orientation="vertical"
+                sx={{
+                  color: 'greyXLight',
+                  width: '1px',
+                  height: '33px',
+                  marginX: '16px',
+                }}
+                data-testid="ds-pagination-divider"
+              />
+            </>
+          )}
+          <Select
+            className="PaginationSelect"
+            labelId="select-label"
+            value={internalLimit}
+            disabled={disabled}
+            inputProps={{ MenuProps: { disableScrollLock: true } }}
+            onChange={handleChangeLimit}
+            options={limitsPerPage}
+            getRenderValue={(value) => value.toString()}
+            popupIcon={faCaretDown}
+            width={73}
+            data-testid="ds-pagination-select"
+            sx={{
+              '.MuiSelect-select': {
+                paddingRight: '24px !important',
+              },
+            }}
+          />
+          <Text variant="body1" pl={2} data-testid="ds-pagination-per-page">
+            {totalPerPageString}
+          </Text>
+          <Divider
+            orientation="vertical"
+            sx={{
+              color: 'greyXLight',
+              width: '1px',
+              height: '33px',
+              marginX: 4,
+            }}
+            data-testid="ds-pagination-divider"
+          />
+        </Box>
+        <Box display="flex" pr={1} data-testid="ds-pagination-controls">
+          <MUIPagination
+            variant="outlined"
+            shape="rounded"
+            disabled={disabled}
+            count={displayablePages}
+            page={internalPage}
+            onChange={(_: ChangeEvent<unknown>, value: number) =>
+              changePage(value)
+            }
+            data-testid="ds-pagination"
+          />
+        </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  },
+);
+
+Pagination.displayName = 'Pagination';
 
 export default Pagination;

package/src/components/Snackbar/Snackbar.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import {
   IconDefinition,
@@ -6,8 +6,7 @@ import {
   faExclamationCircle,
   faTimesCircle,
 } from '@fortawesome/pro-solid-svg-icons';
-import { SnackbarStyle } from '@groupeactual/design-tokens';
-import { Alert, AlertProps, styled, useTheme } from '@mui/material';
+import { Alert, AlertProps } from '@mui/material';
 
 import IconProvider from '@/components/IconProvider';
 
@@ -16,33 +15,34 @@ interface Props extends Omit<AlertProps, 'severity' | 'text'> {
   severity: 'success' | 'warning' | 'error' | 'info';
 }
 
-const Snackbar = ({ text, severity }: Props) => {
-  const theme = useTheme();
-  const StyledSnackbar = useMemo(
-    () => styled(Alert)(SnackbarStyle(theme)),
-    [theme],
-  );
+const Snackbar = React.forwardRef<HTMLDivElement, Props>(
+  ({ text, severity }, ref) => {
+    let alertIcon: IconDefinition;
+    switch (severity) {
+      case 'error':
+        alertIcon = faTimesCircle;
+        break;
+      case 'warning':
+        alertIcon = faExclamationCircle;
+        break;
+      default:
+        alertIcon = faCheckCircle;
+    }
 
-  let alertIcon: IconDefinition;
-  switch (severity) {
-    case 'error':
-      alertIcon = faTimesCircle;
-      break;
-    case 'warning':
-      alertIcon = faExclamationCircle;
-      break;
-    default:
-      alertIcon = faCheckCircle;
-  }
+    return (
+      <Alert
+        ref={ref}
+        className="MuiAlertSnackbar"
+        data-testid="ds-snackbar"
+        icon={<IconProvider icon={alertIcon} />}
+        severity={severity}
+      >
+        {text}
+      </Alert>
+    );
+  },
+);
 
-  return (
-    <StyledSnackbar
-      icon={<IconProvider icon={alertIcon} />}
-      severity={severity}
-    >
-      {text}
-    </StyledSnackbar>
-  );
-};
+Snackbar.displayName = 'Snackbar';
 
 export default Snackbar;

package/src/components/TabsPanel/TabsPanel.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+
+import { Box, FormControlLabel, Radio, Tab, Tabs } from '@mui/material';
+
+import Text from '@/components/Text';
+
+import { TabPanelProps, TabsPanelProps } from './tab.interface';
+
+const TabPanel = ({ children, value, index }: TabPanelProps) => {
+  return (
+    <Box
+      role="tabpanel"
+      hidden={value !== index}
+      id={`tabpanel-${index}`}
+      aria-labelledby={`tab-${index}`}
+      sx={{
+        borderLeft: '1px solid',
+        borderLeftColor: 'primary.main',
+        borderRight: '1px solid',
+        borderRightColor: 'primary.main',
+        borderBottom: '1px solid',
+        borderBottomColor: 'primary.main',
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
+      }}
+    >
+      {value === index && <Box sx={{ p: 2 }}>{children}</Box>}
+    </Box>
+  );
+};
+
+const TabsPanel = React.forwardRef<HTMLDivElement, TabsPanelProps>(
+  ({ tabs, value, width, disabled, onChange }, ref) => {
+    const [localValue, setValue] = useState<number>(value || 0);
+
+    const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+      setValue(newValue);
+
+      if (onChange) {
+        onChange(_event, newValue);
+      }
+    };
+
+    return (
+      <Box sx={{ width: width || 'fit-content' }} data-testid="ds-tabs-panel">
+        <Box
+          sx={{
+            display: 'flex',
+            flexGrow: 1,
+          }}
+        >
+          <Tabs
+            ref={ref}
+            value={value || localValue}
+            onChange={disabled ? undefined : handleChange}
+            sx={{
+              flexGrow: 1,
+              flexShrink: 1,
+              '& .MuiTabs-indicator': {
+                display: 'none',
+              },
+            }}
+            data-testid="ds-tabs"
+          >
+            {tabs.map((tab, index) => (
+              <Tab
+                key={index}
+                sx={{
+                  alignItems: 'flex-start',
+                  flexGrow: 1,
+                  borderTop: '1px solid',
+                  borderLeft: '1px solid',
+                  borderRight: '1px solid',
+                  borderTopRightRadius: '4px',
+                  borderTopLeftRadius: '4px',
+                  borderColor:
+                    index === localValue
+                      ? 'primary.main'
+                      : 'greyLightDefaultBorder',
+                  borderBottom: index === localValue ? '' : '1px solid',
+                  borderBottomColor: 'primary.main',
+                  borderBottomLeftRadius: 'unset !important',
+                  borderBottomRightRadius: 'unset !important',
+                  mr: '8px',
+                  position: 'relative',
+                  overflow: 'visible',
+                  textTransform: 'none',
+                  maxHeight: '54px',
+                  '&:hover': {
+                    pointer: disabled ? 'not-allowed' : 'pointer',
+                  },
+                  '&::after': {
+                    content: '""',
+                    position: 'absolute',
+                    bottom: index === localValue ? '0' : '-1px',
+                    right: `-9px`,
+                    width: '8px',
+                    height: '1px',
+                    backgroundColor: 'primary.main',
+                  },
+                }}
+                label={
+                  <Box>
+                    <FormControlLabel
+                      key={index}
+                      control={
+                        <Radio
+                          size="small"
+                          disabled={disabled}
+                          checked={value === index}
+                          data-testid={`ds-radio-${index}`}
+                        />
+                      }
+                      value={value}
+                      label={
+                        <Box
+                          display="flex"
+                          alignItems="center"
+                          data-testid={`ds-radio-label-${index}`}
+                        >
+                          <Text component="span" variant="body1">
+                            {tab.label}
+                          </Text>
+                        </Box>
+                      }
+                    />
+                  </Box>
+                }
+                data-testid={`tab-${index}`}
+              />
+            ))}
+          </Tabs>
+        </Box>
+        {tabs.map((tab, index) => (
+          <TabPanel
+            key={index}
+            value={localValue}
+            index={index}
+            data-testid={`ds-tabpanel-${index}`}
+          >
+            {tab.content}
+          </TabPanel>
+        ))}
+      </Box>
+    );
+  },
+);
+
+TabsPanel.displayName = 'TabsPanel';
+
+export default TabsPanel;

package/src/components/TabsPanel/index.ts

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

package/src/components/TabsPanel/tab.interface.ts

@@ -0,0 +1,20 @@
+import { ReactNode, SyntheticEvent } from 'react';
+
+export interface TabPanelProps {
+  children: ReactNode;
+  value: number;
+  index: number;
+}
+
+export interface TabData {
+  label: string;
+  content: ReactNode;
+}
+
+export interface TabsPanelProps {
+  tabs: TabData[];
+  value?: number;
+  width?: string | number;
+  disabled?: boolean;
+  onChange?: (_event: SyntheticEvent, _newValue: number) => void;
+}

package/src/components/Text/Text.tsx

@@ -1,36 +1,49 @@
 import React from 'react';
 
-import { Typography, TypographyProps } from '@mui/material';
+import { Typography, TypographyProps, useTheme } from '@mui/material';
 
 interface Props extends Omit<TypographyProps, 'variant'> {
   variant?:
     | 'bigNumber'
     | 'body1'
-    | 'body1Regular'
     | 'body1Medium'
     | 'body1Bold'
     | 'body2'
-    | 'body2Regular'
     | 'body2Medium'
     | 'body2Bold'
-    | 'caption'
-    | 'buttonNotif'
-    | 'header1'
-    | 'header2'
-    | 'header3'
-    | 'header4'
     | 'h1'
     | 'h2'
     | 'h3'
     | 'h4'
+    | 'caption'
+    | 'buttonNotif'
     | 'link1'
     | 'link2';
   /* eslint-disable @typescript-eslint/no-explicit-any */
   component?: any;
 }
 
-const Text = (props: Props) => (
-  <Typography color="greyXDark" {...(props as TypographyProps)} />
-);
+const getColor = (color: Props['color']): string | undefined => {
+  const { palette } = useTheme();
+
+  switch (color) {
+    case 'primary':
+      return palette.text.primary;
+    case 'secondary':
+      return palette.text.secondary;
+    default:
+      return color;
+  }
+};
+
+const Text = React.forwardRef<HTMLDivElement, Props>((props, ref) => (
+  <Typography
+    {...(props as TypographyProps)}
+    color={getColor(props?.color) + ' !important'}
+    ref={ref}
+  />
+));
+
+Text.displayName = 'Text';
 
 export default Text;