@centreon/ui 25.6.0 → 25.6.2

package/src/components/Button/Button.tsx

@@ -7,8 +7,7 @@ import {
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import { DataTestAttributes } from '../../@types/data-attributes';
-
-import { useStyles } from './Button.styles';
+import { button } from './Button.module.css';
 
 const muiVariantMap: Record<
   Required<ButtonProps>['variant'],
@@ -48,8 +47,6 @@ const Button = ({
   className = '',
   ...attr
 }: ButtonProps): ReactElement => {
-  const { classes, cx } = useStyles();
-
   const MuiOverrideProps = useMemo(
     () => ({
       color: 'primary' as const,
@@ -61,7 +58,7 @@ const Button = ({
 
   return (
     <MuiButton
-      className={cx(classes.button, className)}
+      className={`${button} ${className}`}
       data-icon-variant={iconVariant}
       data-is-danger={isDanger}
       data-size={size}

package/src/components/CrudPage/CrudPage.stories.tsx

@@ -7,6 +7,7 @@ import { ChangeEvent, useEffect } from 'react';
 import { CrudPage } from '.';
 import { SnackbarProvider } from '../../';
 import { Column, ColumnType } from '../../Listing/models';
+import '../../ThemeProvider/tailwindcss.css';
 
 interface Item {
   id: number;

package/src/components/DataTable/DataTable.stories.tsx

@@ -5,6 +5,7 @@ import { Box } from '@mui/material';
 import { ColumnType } from '../../Listing/models';
 
 import { DataTable } from './index';
+import '../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTable> = {
   component: DataTable

package/src/components/DataTable/EmptyState/DataTableEmptyState.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableEmptyState } from './DataTableEmptyState';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTableEmptyState> = {
   component: DataTableEmptyState

package/src/components/DataTable/Item/DataTableItem.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableItem } from './DataTableItem';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTableItem> = {
   component: DataTableItem

package/src/components/Form/AccessRights/AccessRights.stories.tsx

@@ -12,6 +12,7 @@ import {
   labels,
   roles
 } from './storiesData';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof AccessRights> = {
   component: AccessRights,

package/src/components/Layout/AreaIndicator.tsx

@@ -1,7 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { useStyles } from './AreaIndicator.styles';
-
 type AreaIndicatorProps = {
   children?: ReactNode | Array<ReactNode>;
   depth?: number;
@@ -17,16 +15,16 @@ const AreaIndicator = ({
   height = '100%',
   depth = 0
 }: AreaIndicatorProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
     <div
-      className={classes.areaIndicator}
+      className={'bg-secondary-main/25 min-h-8 grid grid-cols-[3fr_1fr]'}
       data-depth={depth}
       style={{ height, width }}
     >
       {/* biome-ignore lint/a11y: */}
-      <label>{name}</label>
+      <label className="left-2 rounded-sm border border-[#9747FF7F] border-dashed text-[#9747FF] text-[0.75rem] font-medium left-2 top-1.5 px-2 py-0.5">
+        {name}
+      </label>
       {children}
     </div>
   );

package/src/components/Layout/PageLayout/PageLayout.stories.tsx

@@ -4,6 +4,7 @@ import { Default as DefaultPageHeaderStory } from '../../Header/PageHeader/PageH
 import { AreaIndicator } from '../AreaIndicator';
 
 import { PageLayout } from './index';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof PageLayout> = {
   argTypes: {

package/src/components/Modal/ConfirmationModal/ConfirmationModal.stories.tsx

@@ -4,6 +4,7 @@ import { Provider, atom, createStore, useSetAtom } from 'jotai';
 import { Button } from '../../Button';
 
 import { ConfirmationModal } from './ConfirmationModal';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof ConfirmationModal> = {
   component: ConfirmationModal

package/src/components/Modal/Modal.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../Button';
 
 import { Modal } from '.';
+import '../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof Modal> = {
   argTypes: {

package/src/components/Tabs/Tabs.tsx

@@ -1,14 +1,14 @@
 import { useCallback, useState } from 'react';
 
-import { TabContext, TabList, TabListProps } from '@mui/lab';
-import { Tab } from '@mui/material';
+import { TabContext } from '@mui/lab';
+import { Tab, Tabs as MuiTabs, TabsProps } from '@mui/material';
 
 import { useTabsStyles } from './Tab.styles';
 
 type Props = {
   children: Array<JSX.Element>;
   defaultTab: string;
-  tabList?: TabListProps;
+  tabList?: TabsProps;
   tabs: Array<{
     label: string;
     value: string;
@@ -31,12 +31,13 @@ export const Tabs = ({
 
   return (
     <TabContext value={selectedTab}>
-      <TabList
+      <MuiTabs
         classes={{
           indicator: classes.indicator,
           root: classes.tabs
         }}
         onChange={changeTab}
+        value={selectedTab}
         {...tabList}
       >
         {tabs.map(({ value, label }) => (
@@ -48,7 +49,7 @@ export const Tabs = ({
             value={value}
           />
         ))}
-      </TabList>
+      </MuiTabs>
       {children}
     </TabContext>
   );

package/src/Listing/Cell/DataCell.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  cell: {
-    alignItems: 'center',
-    display: 'flex',
-    height: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap'
-  },
-  clickable: {
-    cursor: 'default'
-  },
-  componentColumn: {
-    width: theme.spacing(2.75)
-  },
-  rowNotHovered: {
-    color: theme.palette.text.secondary
-  },
-  text: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }
-}));
-
-export { useStyles };

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -1,71 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { getTextStyleByViewMode } from '../../useStyleTable';
-
-interface StylesProps {
-  isDragging?: boolean;
-  isInDragOverlay?: boolean;
-  listingVariant?: ListingVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (theme, { isDragging, isInDragOverlay, listingVariant }) => ({
-    active: {
-      '&, &:hover, &:focus': {
-        color: theme.palette.common.white
-      },
-      '&.Mui-active': {
-        '& .MuiTableSortLabel-icon': {
-          color: theme.palette.common.white
-        },
-        color: theme.palette.common.white
-      }
-    },
-    content: {
-      alignItems: 'center',
-      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
-      color: theme.palette.common.white,
-      display: 'flex',
-      height: '100%',
-      justifyContent: 'space-between'
-    },
-    dragHandle: {
-      '&, &.Mui-focus, &:focus': {
-        color: theme.palette.common.white
-      },
-      color: theme.palette.common.white,
-
-      cursor: isDragging ? 'grabbing' : 'grab',
-      opacity: 0,
-      padding: 0
-    },
-    simpleHeaderCellContent: {
-      alignItems: 'center',
-      display: 'inline-flex',
-      marginRight: theme.spacing(2),
-      userSelect: 'none'
-    },
-    tableCell: {
-      backgroundColor: isInDragOverlay
-        ? 'transparent'
-        : theme.palette.background.listingHeader,
-      borderBottom: 'none',
-      height: 'inherit',
-      padding: theme.spacing(0, 1),
-      ...getTextStyleByViewMode({ listingVariant, theme }),
-      '&:hover, &:focus-within, &[data-isdragging=true]': {
-        '& .dragHandle': {
-          opacity: 1
-        }
-      },
-      '&[data-isindragoverlay=true]': {
-        display: 'block',
-        opacity: 0.7
-      }
-    }
-  })
-);
-
-export { useStyles, type StylesProps };

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.styles.ts

@@ -1,26 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    '&.Mui-checked': {
-      color: theme.palette.common.white
-    },
-    '&.MuiCheckbox-indeterminate': {
-      color: theme.palette.common.white
-    },
-    color: theme.palette.common.white
-  },
-  checkboxHeaderCell: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.listingHeader,
-    borderBottom: 'none',
-    display: 'flex',
-    justifyContent: 'start',
-    lineHeight: 'inherit'
-  },
-  predefinedRowsMenu: {
-    color: theme.palette.common.white
-  }
-}));
-
-export { useStyles };

package/src/Listing/Header/ListingHeader.styles.ts

@@ -1,16 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  headerLabelDragging: {
-    cursor: 'grabbing'
-  },
-  root: {
-    height: '100%',
-    padding: theme.spacing(0, 1)
-  },
-  row: {
-    display: 'contents'
-  }
-}));
-
-export { useStyles };

package/src/Listing/Listing.styles.ts

@@ -1,78 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { TableStyleAtom as TableStyle } from './models';
-
-const loadingIndicatorHeight = 3;
-
-interface StylesProps {
-  dataStyle: TableStyle;
-  gridTemplateColumn: string;
-  isResponsive: string;
-  rows: Array<unknown>;
-}
-
-const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, gridTemplateColumn, rows, isResponsive }) => ({
-    actionBar: {
-      alignItems: 'center',
-      display: 'flex'
-    },
-    checkbox: {
-      justifyContent: 'start'
-    },
-    container: {
-      background: 'none',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      width: '100%'
-    },
-    listingContainer: {
-      height: '100%',
-      overflow: 'hidden',
-      width: '100%'
-    },
-    loadingIndicator: {
-      height: loadingIndicatorHeight,
-      width: '100%'
-    },
-    table: {
-      '.listingHeader': {
-        backgroundColor: theme.palette.background.listingHeader,
-        padding: theme.spacing(0, 1)
-      },
-      '.listingHeader > div > div': {
-        backgroundColor: theme.palette.background.listingHeader,
-        height: theme.spacing(dataStyle.header.height / 8)
-      },
-      '.listingHeader > div > div:first-of-type': {
-        height: '100%',
-        padding: theme.spacing(0, 0.5, 0, 1.5)
-      },
-      alignItems: 'center',
-      display: 'grid',
-      gridTemplateColumns: gridTemplateColumn,
-      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || 1
-      }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
-      position: 'relative'
-    },
-    tableBody: {
-      '.MuiTableRow-root > div:first-of-type': {
-        paddingLeft: theme.spacing(1.5)
-      },
-
-      display: 'contents',
-      'div:first-of-type': {
-        gridColumnStart: 1
-      },
-      position: 'relative'
-    },
-    tableWrapper: {
-      borderBottom: 'none',
-      overflow: 'auto'
-    }
-  })
-);
-
-export { useListingStyles, loadingIndicatorHeight };

package/src/Listing/Row/EmptyRow.styles.ts

@@ -1,14 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()(() => ({
-  emptyDataCell: {
-    flexDirection: 'column',
-    gridColumn: 'auto / -1',
-    justifyContent: 'center'
-  },
-  emptyDataRow: {
-    display: 'contents'
-  }
-}));
-
-export { useStyles };

package/src/components/Button/Button.styles.ts

@@ -1,44 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  button: {
-    '&[data-size="medium"]': {
-      fontSize: '16px',
-      height: 'unset',
-      lineHeight: '24px'
-    },
-
-    '&[data-size="small"]': {
-      '&[data-variant="primary"], &[data-variant="secondary"]': {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2)
-      },
-      fontSize: '14px',
-      height: 'unset',
-      lineHeight: '22px'
-    },
-
-    '&[data-variant="primary"]:not(:disabled)': {
-      '&[data-is-danger="true"]': {
-        backgroundColor: theme.palette.error.main
-      },
-
-      backgroundColor: theme.palette.primary.main
-    },
-
-    '&[data-variant="secondary"]:not(:disabled)': {
-      '&[data-is-danger="true"]': {
-        borderColor: theme.palette.error.main,
-        color: theme.palette.error.main
-      },
-
-      borderColor: theme.palette.primary.main,
-      color: theme.palette.primary.main
-    },
-
-    textWrap: 'noWrap',
-    transition: 'unset'
-  }
-}));
-
-export { useStyles };

package/src/components/Layout/AreaIndicator.styles.ts

@@ -1,33 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  areaIndicator: {
-    '& .areaIndicator': {
-      left: theme.spacing(10)
-    },
-    '& label:first-of-type': {
-      border: '1px dashed #9747FF7F',
-      borderRadius: '4px',
-      color: '#9747FFFF',
-      fontSize: '0.75rem',
-      fontWeight: 500,
-      left: theme.spacing(1),
-      padding: theme.spacing(0.125, 1),
-      position: 'absolute',
-      top: theme.spacing(0.75)
-    },
-    '&[data-depth="1"]': {
-      '& label:first-of-type': {
-        '&:before': {
-          content: '"+ "'
-        },
-        left: theme.spacing(10)
-      }
-    },
-
-    backgroundColor: '#9747FF19',
-    minHeight: theme.spacing(4),
-
-    position: 'relative'
-  }
-}));