@centreon/ui 24.4.13 → 24.4.14

package/src/Listing/Listing.cypress.spec.tsx

@@ -1,122 +0,0 @@
-import { Button } from '@mui/material';
-
-import { ColumnType } from './models';
-
-import Listing from '.';
-
-interface Props {
-  row: { name: string };
-}
-
-const ButtonColumn = ({ row }: Props): JSX.Element => (
-  <Button size="small">Click to reveal details about {row.name}</Button>
-);
-
-const generateSubItems = (parentIndex: number): Array<unknown> => {
-  return tenElements.map((__, subIndex) => ({
-    active: false,
-    description: `Sub item ${subIndex + (parentIndex + 10) * 10} description`,
-    disableCheckbox: false,
-    disableRow: false,
-    id: subIndex + (parentIndex + 10) * 10,
-    name: `Sub Item ${subIndex + (parentIndex + 10) * 10}`,
-    selected: false
-  }));
-};
-
-const tenElements = new Array(10).fill(0);
-
-const listingWithSubItems = tenElements.map((_, index) => ({
-  active: false,
-  description: `Entity ${index}`,
-  disableCheckbox: false,
-  disableRow: false,
-  id: index,
-  name: `E${index}`,
-  selected: false,
-  subItems: index % 2 === 0 ? generateSubItems(index) : undefined
-}));
-
-const columnsWithSubItems = [
-  {
-    getFormattedString: ({ name }): string => name,
-    id: 'name',
-    label: 'Name',
-    type: ColumnType.string
-  },
-  {
-    getFormattedString: ({ description }): string => description,
-    id: 'description',
-    label: 'Description',
-    type: ColumnType.string
-  },
-  {
-    Component: ButtonColumn,
-    displaySubItemsCaret: true,
-    id: '#',
-    label: 'Custom',
-    type: ColumnType.component,
-    width: '350px'
-  }
-];
-
-const expandedItems = [0, 8];
-
-const mountListing = (): void => {
-  cy.viewport('macbook-13');
-
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh' }}>
-        <Listing
-          checkable
-          columns={columnsWithSubItems}
-          currentPage={1}
-          limit={10}
-          rows={listingWithSubItems}
-          subItems={{
-            canCheckSubItems: false,
-            enable: true,
-            getRowProperty: () => 'subItems',
-            labelCollapse: 'Collapse',
-            labelExpand: 'Expand'
-          }}
-          totalRows={10}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Listing', () => {
-  beforeEach(mountListing);
-
-  it('expands the row when the corresponding icon si clicked', () => {
-    cy.contains('E0').should('be.visible');
-
-    expandedItems.forEach((index) => {
-      const subItems = generateSubItems(index);
-
-      cy.findByLabelText(`Expand ${index}`).click();
-
-      cy.findByLabelText(`Collapse ${index}`).should('exist');
-
-      subItems.forEach(({ name, description }) => {
-        cy.contains(name).should('exist');
-        cy.contains(description).should('exist');
-      });
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('collapses the row when the corresponding icon si clicked', () => {
-    cy.contains('Sub item 100').should('be.visible');
-
-    cy.findByLabelText('Collapse 0').click();
-
-    cy.contains('Sub item 100').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Listing/Listing.styles.ts

@@ -1,80 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { TableStyleAtom as TableStyle } from './models';
-
-const loadingIndicatorHeight = 3;
-
-interface StylesProps {
-  dataStyle: TableStyle;
-  getGridTemplateColumn: string;
-  listingVariant: ListingVariant;
-  rows: Array<unknown>;
-}
-
-const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows }) => ({
-    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: getGridTemplateColumn,
-      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || 1
-      }, ${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/ListingDocs.mdx

@@ -1,61 +0,0 @@
-{/* ListingDocs.mdx */}
-
-import { Meta, Story } from '@storybook/blocks';
-import * as ListingStories from './index.stories';
-
-<Meta of={ListingStories} />
-
-# Listing
-
-## Expand/collapse rows
-
-The listing supports rows expanding and collapsing.
-
-In order to use this feature, please follow the instructions:
-- (pre-requisite): Your data should have a child property that contains sub-items.
-```javascript
-[
-  {
-    "id": 1,
-    "festival": "Test",
-    "name": "Tom",
-    "counter": 3,
-    "description": "My description of Tom"
-  },
-  {
-    "id": 2,
-    "name": "Jane's group",
-    "festival": "fest",
-    "counter": 5,
-    "description": "My description of Jane's group",
-    "subItems": [
-      {
-        "id": 3,
-        "name": "Jane",
-        "counter": 0,
-        "description": "My description of Jane"
-      },
-    ]
-  }
-]
-```
-- Use the `subItems` property to configure how the component will handle your sub-items
-```javascript
-subItems={{
-  canCheckSubItems: false, // Display checkbox on sub items. Default: false
-  enable: true, // It enables or disable the row expand/collapse feature. Default: false
-  rowProperty: 'subItems' // Which property should be used to detect sub-items. Default: ''
-  labelExpand: 'Expand',
-  labelCollapse: 'Collapse'
-}}
-```
-- Finally, update the column configuration in order to display the expand/collapse caret
-```javascript
-{
-  Component: ButtonColumn,
-  displaySubItemsCaret: true, // Add this property
-  id: '#',
-  label: 'Custom',
-  type: ColumnType.component
-}
-```

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/Listing/Row/EmptyRow.tsx

@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-
-import { TableRow } from '@mui/material';
-
-import Cell from '../Cell';
-
-import { useStyles } from './EmptyRow.styles';
-
-interface EmptyRowProps {
-  children: ReactNode;
-}
-
-const EmptyRow = ({ children }: EmptyRowProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <TableRow className={classes.emptyDataRow} component="div" tabIndex={-1}>
-      <Cell
-        align="center"
-        className={classes.emptyDataCell}
-        disableRowCondition={(): boolean => false}
-        isRowHovered={false}
-      >
-        {children}
-      </Cell>
-    </TableRow>
-  );
-};
-
-export { EmptyRow };

package/src/Listing/Row/SkeletonLoaderRows.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import LoadingSkeleton from '../../LoadingSkeleton';
-
-import { EmptyRow } from './EmptyRow';
-
-interface SkeletonLoaderProps {
-  rows?: number;
-}
-
-const SkeletonLoader = ({ rows = 10 }: SkeletonLoaderProps): JSX.Element => (
-  <>
-    {[...Array(rows)].map((_v, i) => (
-      <EmptyRow
-        key={`skeleton-row-${i}`} // eslint-disable-line react/no-array-index-key
-      >
-        <LoadingSkeleton variant="text" width="100%" />
-      </EmptyRow>
-    ))}
-  </>
-);
-
-export { SkeletonLoader };

package/src/ParentSize/ParentSize.tsx

@@ -1,24 +0,0 @@
-import { ReactElement } from 'react';
-
-import { Responsive } from '@visx/visx';
-
-type ParentSizeState = {
-  height: number;
-  left: number;
-  top: number;
-  width: number;
-};
-
-type Props = {
-  children: (args: ParentSizeState) => ReactElement;
-};
-
-const ParentSize = ({ children, ...props }: Props): JSX.Element => {
-  return (
-    <Responsive.ParentSize {...props} debounceTime={0}>
-      {children}
-    </Responsive.ParentSize>
-  );
-};
-
-export default ParentSize;

package/src/ParentSize/index.ts

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