@centreon/ui 24.4.59 → 24.4.60

package/src/components/DataTable/DataTable.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  dataTable: {
-    '&[data-variant="grid"]': {
-      '& > *': {
-        width: 'auto'
-      },
-      display: 'grid',
-      gridGap: theme.spacing(2.5),
-      gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(45)})`
-    },
-    '&[data-variant][data-is-empty="true"]': {
-      display: 'flex',
-      justifyContent: 'center',
-      width: '100%'
-    },
-    display: 'flex'
-  },
-  dataTableScrollContainer: {
-    // FIXME the global -webkit-scrollbar styles are not optimal for this component in grid variant
-    height: '100%',
-    overflowY: 'auto'
-  }
-}));
-
-export { useStyles };

package/src/components/DataTable/DataTable.tsx

@@ -1,35 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './DataTable.styles';
-
-type DataTableProps = {
-  children: ReactNode | Array<ReactNode>;
-  isEmpty?: boolean;
-  variant?: 'grid';
-};
-
-/** *
- * @description DataTable component is used to display a list of items.
- * It supports grids (as cards) and tables (as rows) with filtering, pagination, sorting, and other features
- */
-const DataTable = ({
-  children,
-  variant = 'grid',
-  isEmpty = false
-}: DataTableProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.dataTableScrollContainer}>
-      <div
-        className={classes.dataTable}
-        data-is-empty={isEmpty}
-        data-variant={variant}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export { DataTable };

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

@@ -1,21 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { DataTableEmptyState } from './DataTableEmptyState';
-
-const meta: Meta<typeof DataTableEmptyState> = {
-  component: DataTableEmptyState
-};
-
-export default meta;
-type Story = StoryObj<typeof DataTableEmptyState>;
-
-export const Default: Story = {
-  args: {
-    labels: {
-      actions: {
-        create: 'Create item'
-      },
-      title: 'No items found'
-    }
-  }
-};

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -1,26 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  actions: {
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  dataTableEmptyState: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(4),
-
-    h2: {
-      color: theme.palette.text.primary,
-      font: 'normal normal 600 34px/36px Roboto',
-      margin: '0'
-    },
-    height: '100%',
-    justifyContent: 'center',
-    minHeight: '30vh',
-    width: '100%'
-  }
-}));
-
-export { useStyles };

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

@@ -1,53 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { useTranslation } from 'react-i18next';
-
-import { Add as AddIcon } from '@mui/icons-material';
-import { Typography as MuiTypography } from '@mui/material';
-
-import { Button } from '../../Button';
-
-import { useStyles } from './DataTableEmptyState.styles';
-
-type ListEmptyStateProps = {
-  canCreate?: boolean;
-  labels: {
-    actions?: {
-      create: string;
-    };
-    title: string;
-  };
-  onCreate?: () => void;
-};
-
-const DataTableEmptyState = ({
-  labels,
-  onCreate,
-  canCreate = true
-}: ListEmptyStateProps): ReactElement => {
-  const { classes } = useStyles();
-  const { t } = useTranslation();
-
-  return (
-    <div
-      className={classes.dataTableEmptyState}
-      data-testid="data-table-empty-state"
-    >
-      <MuiTypography variant="h2">{t(labels.title)}</MuiTypography>
-      <div className={classes.actions}>
-        {canCreate && (
-          <Button
-            aria-label="create"
-            icon={<AddIcon />}
-            iconVariant="start"
-            onClick={() => onCreate?.()}
-          >
-            {t(labels.actions?.create || '')}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export { DataTableEmptyState };

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

@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { DataTableItem } from './DataTableItem';
-
-const meta: Meta<typeof DataTableItem> = {
-  component: DataTableItem
-};
-
-export default meta;
-type Story = StoryObj<typeof DataTableItem>;
-
-export const Default: Story = {
-  args: {
-    description: 'DataTable item description',
-    title: 'DataTable item'
-  }
-};
-
-export const WithActions: Story = {
-  args: {
-    ...Default.args,
-    hasActions: true,
-    hasCardAction: true
-  }
-};

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -1,33 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  dataTableItem: {
-    '& .MuiCardActionArea-root': {
-      alignItems: 'flex-start',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      justifyContent: 'space-between'
-    },
-    '& .MuiCardActions-root': {
-      '& > span': {
-        display: 'flex',
-        gap: theme.spacing(1)
-      },
-      display: 'flex',
-
-      justifyContent: 'space-between'
-    },
-    borderRadius: theme.shape.borderRadius,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '186px',
-    p: {
-      color: theme.palette.text.secondary,
-      letterSpacing: '0',
-      margin: '0'
-    }
-  }
-}));
-
-export { useStyles };

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

@@ -1,123 +0,0 @@
-import React, { forwardRef, ReactElement, RefObject, useMemo } from 'react';
-
-import {
-  Card as MuiCard,
-  CardActionArea as MuiCardActionArea,
-  CardActions as MuiCardActions,
-  CardContent as MuiCardContent,
-  Typography as MuiTypography
-} from '@mui/material';
-import {
-  Delete as DeleteIcon,
-  Settings as SettingsIcon,
-  Share as ShareIcon
-} from '@mui/icons-material';
-
-import { IconButton } from '../../Button';
-import { ConfirmationTooltip } from '../../Tooltip/ConfirmationTooltip';
-
-import { useStyles } from './DataTableItem.styles';
-
-export interface DataTableItemProps {
-  description?: string;
-  hasActions?: boolean;
-  hasCardAction?: boolean;
-  labelsDelete: {
-    cancel: string;
-    confirm: {
-      label: string;
-      secondaryLabel?: string;
-    };
-  };
-  onClick?: () => void;
-  onDelete?: () => void;
-  onEdit?: () => void;
-  onEditAccessRights?: () => void;
-  title: string;
-}
-
-const DataTableItem = forwardRef(
-  (
-    {
-      title,
-      description,
-      hasCardAction = false,
-      hasActions = false,
-      onClick,
-      onEdit,
-      onDelete,
-      onEditAccessRights,
-      labelsDelete
-    }: DataTableItemProps,
-    ref
-  ): ReactElement => {
-    const { classes } = useStyles();
-
-    const ActionArea = useMemo(
-      () => (hasCardAction ? MuiCardActionArea : React.Fragment),
-      [hasCardAction]
-    );
-
-    return (
-      <MuiCard
-        className={classes.dataTableItem}
-        data-item-title={title}
-        ref={ref as RefObject<HTMLDivElement>}
-        variant="outlined"
-      >
-        <ActionArea aria-label="view" onClick={() => onClick?.()}>
-          <MuiCardContent>
-            <MuiTypography fontWeight={500} variant="h5">
-              {title}
-            </MuiTypography>
-            {description && <MuiTypography>{description}</MuiTypography>}
-          </MuiCardContent>
-        </ActionArea>
-        {hasActions && (
-          <MuiCardActions>
-            <span>
-              {onDelete && (
-                <ConfirmationTooltip
-                  confirmVariant="error"
-                  labels={labelsDelete}
-                  onConfirm={onDelete}
-                >
-                  {(openTooltip) => (
-                    <IconButton
-                      aria-label="delete"
-                      data-testid="delete"
-                      icon={<DeleteIcon />}
-                      size="small"
-                      variant="ghost"
-                      onClick={openTooltip}
-                    />
-                  )}
-                </ConfirmationTooltip>
-              )}
-            </span>
-            <span>
-              <IconButton
-                aria-label="edit access rights"
-                data-testid="edit-access-rights"
-                icon={<ShareIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEditAccessRights?.()}
-              />
-              <IconButton
-                aria-label="edit"
-                data-testid="edit"
-                icon={<SettingsIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEdit?.()}
-              />
-            </span>
-          </MuiCardActions>
-        )}
-      </MuiCard>
-    );
-  }
-);
-
-export { DataTableItem };

package/src/components/DataTable/Item/DataTableItemSkeleton.tsx

@@ -1,13 +0,0 @@
-import { ReactElement } from 'react';
-
-import { LoadingSkeleton } from '../../..';
-
-import { useStyles } from './DataTableItem.styles';
-
-const DataTableItemSkeleton = (): ReactElement => {
-  const { classes } = useStyles();
-
-  return <LoadingSkeleton className={classes.dataTableItem} />;
-};
-
-export { DataTableItemSkeleton };

package/src/components/DataTable/index.ts

@@ -1,10 +0,0 @@
-import { DataTable as DataTableRoot } from './DataTable';
-import { DataTableItem } from './Item/DataTableItem';
-import { DataTableItemSkeleton } from './Item/DataTableItemSkeleton';
-import { DataTableEmptyState } from './EmptyState/DataTableEmptyState';
-
-export const DataTable = Object.assign(DataTableRoot, {
-  EmptyState: DataTableEmptyState,
-  Item: DataTableItem,
-  ItemSkeleton: DataTableItemSkeleton
-});