@centreon/ui 24.11.14 → 24.11.21

package/src/utils/useRefreshInterval.ts

@@ -0,0 +1,39 @@
+import { useAtomValue } from 'jotai';
+import { always, cond, equals } from 'ramda';
+
+import { refreshIntervalAtom } from '@centreon/ui-context';
+
+interface Props {
+  globalRefreshInterval?: {
+    interval: number | null;
+    type: 'global' | 'manual';
+  };
+  refreshInterval: 'default' | 'custom' | 'manual';
+  refreshIntervalCustom?: number;
+}
+
+export const useRefreshInterval = ({
+  refreshInterval,
+  refreshIntervalCustom,
+  globalRefreshInterval = {
+    interval: null,
+    type: 'global'
+  }
+}: Props): number | false => {
+  const platformInterval = useAtomValue(refreshIntervalAtom);
+
+  const refreshIntervalToUse = cond([
+    [
+      equals('default'),
+      always(
+        equals(globalRefreshInterval.type, 'manual')
+          ? false
+          : globalRefreshInterval.interval || platformInterval
+      )
+    ],
+    [equals('custom'), always(refreshIntervalCustom)],
+    [equals('manual'), always(false)]
+  ])(refreshInterval);
+
+  return refreshIntervalToUse ? (refreshIntervalToUse as number) * 1000 : false;
+};

package/src/utils/useResizeObserver.ts

@@ -0,0 +1,6 @@
+// https://github.com/ZeeCoder/use-resize-observer
+import useResizeObserver from 'use-resize-observer';
+
+export * from 'use-resize-observer';
+
+export { useResizeObserver };

package/src/utils/useViewportIntersection.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 
 interface ViewportIntersectionState {
   isInViewport: boolean;

package/{setupTests.js → test/setupTests.js}

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-undef */
-// import '@testing-library/jest-dom/extend-expect';
+
+import '@testing-library/jest-dom';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import fetchMock from 'jest-fetch-mock';

package/{src → test}/testRenderer.tsx

@@ -9,7 +9,7 @@ import fetchMock, { MockParams } from 'jest-fetch-mock';
 
 import { ThemeMode } from '@centreon/ui-context';
 
-import ThemeProvider from './StoryBookThemeProvider';
+import ThemeProvider from '../src/StoryBookThemeProvider';
 
 interface Props {
   children: ReactElement;

package/.storybook/main.js

@@ -1,82 +0,0 @@
-const { equals } = require("ramda");
-
-const excludeNodeModulesExceptCentreonUi =
-  /node_modules(\\|\/)(?!(centreon-frontend(\\|\/)packages(\\|\/)(ui-context|centreon-ui)))/;
-  
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  features: {
-    previewMdx2: true,
-  },
-  stories: ['../src/*.stories.mdx', '../src/**/*.stories.@(jsx|tsx)'],
-  typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  },
-  addons: [
-    'storybook-addon-mock/register',
-    'storybook-dark-mode',
-    '@storybook/addon-controls', 
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-      },
-    },
-  ],
-  webpackFinal: (config) => {
-    delete config.resolve.alias['emotion-theming'];
-    delete config.resolve.alias['@emotion/styled'];
-    delete config.resolve.alias['@emotion/core'];
-
-    const configWithoutEmotionAliases = {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        extensions: ['.js', '.ts', '.tsx'],
-      },
-      module: {
-        ...config.module,
-        rules: [
-          {
-            test: /\.tsx?$/,
-            exclude: /node_modules(\\|\/)(?!(@centreon))/,
-            use: {
-              loader: 'swc-loader',
-              options: {
-                jsc: {
-                  transform: {
-                    react: {
-                      runtime: 'automatic',
-                    },
-                  },
-                  parser: {
-                    syntax: 'typescript',
-                  },
-                },
-                parseMap: true,
-              },
-            }
-          },
-          {
-            exclude: excludeNodeModulesExceptCentreonUi,
-            test: /\.(bmp|png|jpg|jpeg|gif|svg)$/,
-            use: [
-              {
-                loader: 'url-loader',
-                options: {
-                  limit: 10000,
-                  name: '[name].[hash:8].[ext]',
-                },
-              },
-            ],
-          },
-          ...(config.module.rules.filter(({ type }) => !equals(type, 'asset/resource'))),
-        ],
-      },
-    }
-
-    return configWithoutEmotionAliases;
-  }
-};

package/.storybook/preview.tsx

@@ -1,21 +0,0 @@
-import { addDecorator } from '@storybook/react';
-
-import { useDarkMode } from 'storybook-dark-mode';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-import StoryBookThemeProvider from '../src/StoryBookThemeProvider';
-import QueryProvider from '../src/api/QueryProvider';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
-
-const withThemeProvider = (story): JSX.Element => (
-  <StoryBookThemeProvider themeMode={useDarkMode() ? ThemeMode.dark :  ThemeMode.light}>
-    <QueryProvider>
-      {story()}
-      <ReactQueryDevtools />
-    </QueryProvider>
-  </StoryBookThemeProvider>
-);
-
-addDecorator(withThemeProvider);

package/jest.config.js

@@ -1,20 +0,0 @@
-const baseConfig = require('../js-config/jest');
-
-module.exports = {
-  ...baseConfig,
-  moduleNameMapper: {
-    '\\.(s?css|png|svg)$': 'identity-obj-proxy',
-    '^react($|/.+)': '<rootDir>/../../node_modules/react$1'
-  },
-  reporters: ['default', ['jest-junit', { outputName: 'junit.xml' }]],
-  roots: ['<rootDir>/src/'],
-  setupFilesAfterEnv: [
-    '<rootDir>/setupTests.js',
-    '@testing-library/jest-dom/extend-expect'
-  ],
-  testResultsProcessor: 'jest-junit',
-  transform: {
-    ...baseConfig.transform,
-    '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx'
-  }
-};

package/src/Form/index.tsx

@@ -1,72 +0,0 @@
-import { Formik, FormikHelpers, FormikValues } from 'formik';
-import * as Yup from 'yup';
-
-import FormButtons from './FormButtons';
-import Inputs from './Inputs';
-import { Group, InputProps } from './Inputs/models';
-
-export enum GroupDirection {
-  Horizontal = 'horizontal',
-  Vertical = 'vertical'
-}
-
-interface Props<T> {
-  Buttons?: React.ComponentType;
-  groupDirection?: GroupDirection;
-  groups?: Array<Group>;
-  initialValues: T;
-  inputs: Array<InputProps>;
-  isCollapsible?: boolean;
-  isLoading?: boolean;
-  submit: (values: T, bag: FormikHelpers<T>) => void | Promise<void>;
-  validate?: (values: FormikValues) => void;
-  validationSchema: Yup.SchemaOf<T>;
-}
-
-const Form = <T extends object>({
-  initialValues,
-  validate,
-  validationSchema,
-  submit,
-  groups,
-  inputs,
-  Buttons = FormButtons,
-  isLoading = false,
-  isCollapsible = false,
-  groupDirection = GroupDirection.Vertical
-}: Props<T>): JSX.Element => {
-  if (isLoading) {
-    return (
-      <Inputs
-        isLoading
-        groups={groups}
-        inputs={inputs}
-        isCollapsible={isCollapsible}
-      />
-    );
-  }
-
-  return (
-    <Formik<T>
-      enableReinitialize
-      validateOnBlur
-      validateOnMount
-      initialValues={initialValues}
-      validate={validate}
-      validationSchema={validationSchema}
-      onSubmit={submit}
-    >
-      <div>
-        <Inputs
-          groupDirection={groupDirection}
-          groups={groups}
-          inputs={inputs}
-          isCollapsible={isCollapsible}
-        />
-        <Buttons />
-      </div>
-    </Formik>
-  );
-};
-
-export default Form;

package/src/Home.stories.mdx

@@ -1,122 +0,0 @@
-import { Meta } from '@storybook/addon-docs'
-import { Typography, Box, Paper, Accordion, AccordionSummary, AccordionDetails, Link, Stack } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-
-import { MdxThemeProvider } from './StoryBookThemeProvider'
-
-<Meta title="Home" />
-
-<Typography variant="h4">Welcome to Centreon UI</Typography>
-<br />
-
-<Typography>This project contains design system's component used in every Centreon projects using ReactJS</Typography>
-<br />
-
-<Typography>Discover older versions of the Centreon UI's storybook</Typography>
-<Stack>
-  <Link href="https://storybook.centreon.com/index.html" target="__blank" rel="noopener noreferrer">
-    <Typography>Latest</Typography>
-  </Link>
-  <Link href="https://storybook.centreon.com/23.04/index.html" target="__blank" rel="noopener noreferrer">
-    <Typography>23.04</Typography>
-  </Link>
-  <Link href="https://storybook.centreon.com/22.10/index.html" target="__blank" rel="noopener noreferrer">
-    <Typography>22.10</Typography>
-  </Link>
-  <Link href="https://storybook.centreon.com/22.04/index.html" target="__blank" rel="noopener noreferrer">
-    <Typography>22.04</Typography>
-  </Link>
-  <Link href="https://storybook.centreon.com/21.10/index.html" target="__blank" rel="noopener noreferrer">
-    <Typography>21.10</Typography>
-  </Link>
-  <Link href="https://storybook.centreon.com/21.04/index.html" target="__blank" rel="noopener noreferrer">
-    <Typography>21.04</Typography>
-  </Link>
-  <Link href="https://storybook.centreon.com/20.10/index.html" target="__blank" rel="noopener noreferrer">
-    <Typography>20.10</Typography>
-  </Link>
-  <Link href="https://storybook.centreon.com/20.04/index.html" target="__blank" rel="noopener noreferrer">
-    <Typography>20.04</Typography>
-  </Link>
-</Stack>
-<br />
-
-<Accordion>
-  <AccordionSummary
-    expandIcon={<ExpandMoreIcon />}
-  >
-    <Typography variant="h5">Add stories</Typography>
-  </AccordionSummary>
-  <AccordionDetails>
-    <ul>
-      <li><Typography>Create a file named `index.stories.tsx` along side your component</Typography></li>
-      <li>
-        <Typography>Add a title, the component and argTypes</Typography>
-        <Typography>Example: </Typography>
-
-        ```typescript
-        export default {
-          title: 'MyComponent',
-          Component: MyComponent,
-          argTypes: {
-            propA: { control: 'text' },
-            propB: { control: 'number' },
-          },
-        };
-        ```
-
-      </li>
-      <li>
-        <Typography>Create a playground for your component</Typography>
-
-        ```typescript
-          const Template: ComponentStory<typeof MyComponent> = (args) => (
-            <MyComponent {...args} />
-          );
-
-          export const Playground = Template.bind({});
-        ```
-
-      </li> 
-      <li>
-        <Typography>Then add your story</Typography>
-
-        ```typescript
-          export const basic = Template.bind({});
-          basic.args = { propA: 'test', propB: 0 };
-        ```
-
-      </li>
-    </ul>
-  </AccordionDetails>
-</Accordion>
-<Accordion>
-  <AccordionSummary
-    expandIcon={<ExpandMoreIcon />}
-  >
-    <Typography variant="h5">Run tests</Typography>
-  </AccordionSummary>
-  <AccordionDetails>
-    <Typography>There are two kinds of tests in Centreon UI.</Typography>
-    <Typography>Jest + RTL: Component testing</Typography>
-    <Typography>Storyshots: When running them, storybook will capture a snapshot for each and compares them with the older ones</Typography>
-    <br />
-
-    <Typography>Run all the test (Jest + Storyshots)</Typography>
-    `pnpm build:storybook && pnpm t`
-    <br />
-
-    <Typography>Run storyshots following one or more story title</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent"`
-    <Typography>Or</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent"`
-    <br />
-
-    <Typography>Update snapshots</Typography>
-    `pnpm build:storybook && pnpm t -- -u`
-    <Typography>Or</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent" -u`
-    <Typography>Or</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent" -u`
-  </AccordionDetails>
-</Accordion>

package/src/Listing/Header/SortableCell/DraggableIcon.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-
-import { useTranslation } from 'react-i18next';
-
-import SvgIcon from '@mui/material/SvgIcon';
-
-import { labelDragHandle } from '../../translatedLabels';
-
-interface Icon {
-  className?: string;
-  columnLabel?: string;
-  isInteractive?: boolean;
-  visible?: boolean;
-}
-
-const DraggableIcon = ({
-  visible = false,
-  columnLabel,
-  className,
-  isInteractive = false,
-  ...rest
-}: Icon): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <SvgIcon
-      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
-      fontSize="medium"
-      {...rest}
-      className={className}
-      role={isInteractive ? 'button' : undefined}
-      tabIndex={isInteractive ? 0 : undefined}
-    >
-      {visible && (
-        <path d="M 12 8 c 1.1 0 2 -0.9 2 -2 s -0.9 -2 -2 -2 s -2 0.9 -2 2 s 0.9 2 2 2 Z m 0 2 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z m 0 6 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z" />
-      )}
-    </SvgIcon>
-  );
-};
-
-export default DraggableIcon;

package/src/Listing/Header/index.tsx

@@ -1,243 +0,0 @@
-import * as React from 'react';
-
-import { closestCenter, DraggableSyntheticListeners } from '@dnd-kit/core';
-import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { equals, find, isEmpty, map, not, pick, propEq } from 'ramda';
-import { makeStyles, withStyles } from 'tss-react/mui';
-
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import {
-  TableCell,
-  TableCellBaseProps,
-  TableHead,
-  TableRow
-} from '@mui/material';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { getVisibleColumns, Props as ListingProps } from '..';
-import PopoverMenu from '../../PopoverMenu';
-import SortableItems from '../../SortableItems';
-import Checkbox from '../Checkbox';
-import { Column, PredefinedRowSelection } from '../models';
-import { labelPredefinedRowsSelectionMenu } from '../translatedLabels';
-
-import PredefinedSelectionList from './PredefinedSelectionList';
-import SortableHeaderCellContent from './SortableCell/Content';
-
-const height = 28;
-
-const HeaderCell = withStyles(TableCell, (theme) => ({
-  root: {
-    padding: theme.spacing(0)
-  }
-}));
-
-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',
-    minWidth: theme.spacing(51 / 8),
-    padding: 0
-  },
-  headerLabelDragging: {
-    cursor: 'grabbing'
-  },
-  predefinedRowsMenu: {
-    color: theme.palette.common.white,
-    width: theme.spacing(2)
-  },
-  row: {
-    display: 'contents'
-  }
-}));
-
-type Props = Pick<
-  ListingProps<unknown>,
-  | 'sortField'
-  | 'sortOrder'
-  | 'onSort'
-  | 'columns'
-  | 'checkable'
-  | 'onSelectColumns'
-  | 'columnConfiguration'
-  | 'totalRows'
-> & {
-  areColumnsEditable: boolean;
-  memoProps: Array<unknown>;
-  onSelectAllClick: (event) => void;
-  onSelectRowsWithCondition: (condition) => void;
-  predefinedRowsSelection: Array<PredefinedRowSelection>;
-  rowCount: number;
-  selectedRowCount: number;
-  viewMode?: ListingVariant;
-};
-
-interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
-  attributes;
-  id: string;
-  isDragging: boolean;
-  isInDragOverlay?: boolean;
-  itemRef: React.RefObject<HTMLDivElement>;
-  listeners: DraggableSyntheticListeners;
-  style;
-}
-
-const ListingHeader = ({
-  onSelectAllClick,
-  sortOrder,
-  sortField,
-  selectedRowCount,
-  rowCount,
-  columns,
-  columnConfiguration,
-  onSort,
-  onSelectColumns,
-  checkable,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition,
-  memoProps,
-  areColumnsEditable,
-  viewMode
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
-
-  const visibleColumns = getVisibleColumns({
-    columnConfiguration,
-    columns
-  });
-
-  const getColumnById = (id: string): Column => {
-    return find(propEq('id', id), columns) as Column;
-  };
-
-  const Content = React.useCallback(
-    ({
-      isInDragOverlay,
-      listeners,
-      attributes,
-      style,
-      isDragging,
-      itemRef,
-      id
-    }: ContentProps): JSX.Element => {
-      return (
-        <SortableHeaderCellContent
-          areColumnsEditable={areColumnsEditable}
-          column={getColumnById(id)}
-          columnConfiguration={columnConfiguration}
-          isDragging={isDragging}
-          isInDragOverlay={isInDragOverlay}
-          itemRef={itemRef}
-          sortField={sortField}
-          sortOrder={sortOrder}
-          style={style}
-          viewMode={viewMode}
-          onSort={onSort}
-          {...listeners}
-          {...attributes}
-        />
-      );
-    },
-    [columnConfiguration, columns, sortField, sortOrder]
-  );
-
-  const hasRows = not(equals(rowCount, 0));
-
-  return (
-    <TableHead className={cx(classes.row, 'listingHeader')} component="div">
-      <TableRow className={classes.row} component="div">
-        {checkable && (
-          <TableCell
-            className={classes.checkboxHeaderCell}
-            component={
-              'div' as unknown as React.ElementType<TableCellBaseProps>
-            }
-          >
-            <Checkbox
-              checked={hasRows && selectedRowCount === rowCount}
-              className={classes.checkbox}
-              indeterminate={
-                hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
-              }
-              inputProps={{ 'aria-label': 'Select all' }}
-              onChange={onSelectAllClick}
-            />
-            {not(isEmpty(predefinedRowsSelection)) ? (
-              <PopoverMenu
-                className={classes.predefinedRowsMenu}
-                icon={<ArrowDropDownIcon />}
-                title={labelPredefinedRowsSelectionMenu}
-              >
-                {({ close }): JSX.Element => (
-                  <PredefinedSelectionList
-                    close={close}
-                    predefinedRowsSelection={predefinedRowsSelection}
-                    onSelectRowsWithCondition={onSelectRowsWithCondition}
-                  />
-                )}
-              </PopoverMenu>
-            ) : (
-              <div className={classes.predefinedRowsMenu} />
-            )}
-          </TableCell>
-        )}
-        <SortableItems
-          updateSortableItemsOnItemsChange
-          Content={Content}
-          additionalProps={[sortField, sortOrder]}
-          collisionDetection={closestCenter}
-          itemProps={['id']}
-          items={visibleColumns}
-          memoProps={memoProps}
-          sortingStrategy={horizontalListSortingStrategy}
-          onDragEnd={({ items }): void => {
-            onSelectColumns?.(items);
-          }}
-        />
-      </TableRow>
-    </TableHead>
-  );
-};
-
-const columnMemoProps = [
-  'id',
-  'label',
-  'rowMemoProps',
-  'sortField',
-  'sortable',
-  'type'
-];
-
-const MemoizedListingHeader = React.memo<Props>(
-  ListingHeader,
-  (prevProps, nextProps) =>
-    equals(prevProps.sortOrder, nextProps.sortOrder) &&
-    equals(prevProps.sortField, nextProps.sortField) &&
-    equals(prevProps.selectedRowCount, nextProps.selectedRowCount) &&
-    equals(prevProps.rowCount, nextProps.rowCount) &&
-    equals(
-      map(pick(columnMemoProps), prevProps.columns),
-      map(pick(columnMemoProps), nextProps.columns)
-    ) &&
-    equals(prevProps.checkable, nextProps.checkable) &&
-    equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&
-    equals(prevProps.memoProps, nextProps.memoProps) &&
-    equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable) &&
-    equals(prevProps.viewMode, nextProps.viewMode)
-);
-
-export default MemoizedListingHeader;
-export { height as headerHeight, HeaderCell };

package/src/Listing/Skeleton.tsx

@@ -1,11 +0,0 @@
-import LoadingSkeleton from '../LoadingSkeleton';
-
-const ListingLoadingSkeleton = (): JSX.Element => (
-  <>
-    {['skeleton1', 'skeleton2', 'skeleton3'].map((key) => (
-      <LoadingSkeleton height={20} key={key} variant="text" width="100%" />
-    ))}
-  </>
-);
-
-export default ListingLoadingSkeleton;