@centreon/ui 23.10.36 → 23.10.37

package/.storybook/main.js

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,21 @@
+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/README.md

@@ -20,57 +20,27 @@ To start Storybook server, run:
 
 `pnpm storybook`
 
+# Tests
 
-# Add stories
+We have two kind of tests:
+ - Unit tests provided by Jest
+ - End to End tests provided by Storyshot using Jest. Storyshot is an addon of Storybook that compares graphically our stories.
 
-- Create a file named `index.stories.tsx` along side your component
-      
-- Add a title, the component and argTypes
-  
-  ```typescript
-  export default {
-    title: 'MyComponent',
-    Component: MyComponent,
-    argTypes: {
-      propA: { control: 'text' },
-      propB: { control: 'number' },
-    },
-  };
-  ```
+To run Unit tests:
 
-- Create a playground for your component
+`pnpm test`
 
-  ```typescript
-    const Template: ComponentStory<typeof MyComponent> = (args) => (
-      <MyComponent {...args} />
-    );
+or
 
-    export const Playground = Template.bind({});
-  ```
+`pnpm t`
 
-- Then add your story
+To run End to End tests:
+  - Build Storybook : `pnpm build:storybook`
+  - Run all Storyshot tests : `pnpm test:storyshot`
 
-  ```typescript
-    export const basic = Template.bind({});
-    basic.args = { propA: 'test', propB: 0 };
-  ```
-
-# Tests architecture
-
-There are two kinds of tests in Centreon UI.
-- Jest + RTL and Cypress: Component testing. We want to migrate from Jest to Cypress
-- Chromatic: Chromatic is a tool that snapshots our stories and better handle snapshots changes using a review process
-
-
-### Run Jest tests
-
-```bash
-pnpm t
-```
-
-### Run Cypress tests
+You can also test one or more Components using the following syntax:
 
 ```bash
-pnpm cypress:ui # Opens the Cypress controlled browser to debug tests
-pnpm cypress:cli # Runs tests in the terminal
+pnpm test:storyshot -- --story "Title" # Run Storyshot tests about Title component
+pnpm test:storyshot -- --story "Breadcrumb|Title" # Run Storyshot tests about Title and Breadcrumb components
 ```

package/jest.config.js

@@ -0,0 +1,20 @@
+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/package.json

@@ -1,19 +1,16 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.36",
+  "version": "23.10.37",
   "description": "Centreon UI Components",
+  "main": "src/index.ts",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
     "eslint:fix": "pnpm eslint --fix",
-    "storybook": "storybook dev -p 9001 -c .storybook",
-    "build:storybook": "storybook build -c .storybook -o .out",
-    "test": "jest",
-    "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
-    "test:ci": "jest --silent --reporter=jest-junit",
-    "cypress:ui": "cypress open --component --browser=chrome",
-    "cypress:cli:updateSnapshot": "pnpm cypress:cli --env updateSnapshots=true",
-    "cypress:cli": "cypress run --component --browser=chrome",
-    "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
+    "storybook": "start-storybook -p 9001 -c .storybook",
+    "build:storybook": "build-storybook -c .storybook -o .out",
+    "test": "node testRunner.js",
+    "test:storyshot": "pnpm test storyshots.test.js",
+    "test:ci": "node testRunner.js --silent --reporter=jest-junit"
   },
   "sideEffects": false,
   "repository": {
@@ -24,108 +21,52 @@
     "centreon",
     "react"
   ],
-  "author": {
-    "name": "centreon@centreon.com"
-  },
+  "author": "centreon@centreon.com",
   "license": "GPL-2.0",
   "bugs": {
     "url": "https://github.com/centreon/centreon/issues"
   },
   "homepage": "https://github.com/centreon/centreon#readme",
-  "main": "src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./components": "./src/components/index.ts",
-    "./fonts/*": "./public/fonts/*",
-    "./test/testRenderer": "./test/testRenderer.tsx"
-  },
-  "files": [
-    "package.json",
-    "src/*",
-    "public/*",
-    "test/*"
-  ],
   "devDependencies": {
-    "@cypress/react": "^7.0.2",
-    "@cypress/webpack-dev-server": "^3.2.3",
     "@mdx-js/react": "^2.1.4",
-    "@simonsmith/cypress-image-snapshot": "^6.1.0",
-    "@storybook/addon-a11y": "^7.0.9",
-    "@storybook/addon-docs": "^7.0.9",
-    "@storybook/addon-essentials": "^7.0.9",
-    "@storybook/addon-interactions": "^7.0.9",
-    "@storybook/addon-styling": "^1.0.6",
-    "@storybook/builder-vite": "^7.0.9",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/manager-api": "^7.0.9",
-    "@storybook/mdx2-csf": "^1.0.0",
-    "@storybook/preview-api": "^7.0.9",
-    "@storybook/react": "^7.0.9",
-    "@storybook/react-vite": "^7.0.9",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.9",
-    "@testing-library/cypress": "^8.0.7",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.11",
+    "@storybook/addon-storyshots": "^6.5.11",
+    "@storybook/addon-storyshots-puppeteer": "^6.5.11",
+    "@storybook/builder-webpack5": "^6.5.11",
+    "@storybook/manager-webpack5": "^6.5.11",
+    "@storybook/mdx2-csf": "^0.0.3",
+    "@storybook/react": "^6.5.11",
     "@types/jest": "^27.5.0",
     "@types/ramda": "^0.28.12",
-    "@types/react": "^18.0.26",
-    "@types/testing-library__jest-dom": "^5.14.6",
-    "@vitejs/plugin-react": "^4.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.0",
-    "axios-mock-adapter": "^1.21.4",
-    "cypress": "^12.8.0",
+    "axios-mock-adapter": "^1.20.0",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest-transform-stub": "^2.0.0",
-    "mochawesome": "^7.1.3",
     "puppeteer": "^13.7.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "remark-gfm": "^3.0.1",
-    "sass": "^1.62.1",
-    "speed-measure-vite-plugin": "^0.1.2",
-    "storybook": "^7.0.9",
-    "storybook-addon-mock": "^4.0.0",
-    "storybook-dark-mode": "^3.0.0",
-    "style-dictionary": "^3.8.0",
-    "ts-node": "^10.9.1",
-    "use-resize-observer": "^9.1.0",
-    "vite": "^4.3.5",
-    "vite-plugin-svgr": "^3.2.0",
-    "vite-plugin-turbosnap": "^1.0.2"
+    "react-test-renderer": "^18.1.0",
+    "storybook-addon-mock": "^2.4.1",
+    "storybook-dark-mode": "^1.1.0"
   },
   "dependencies": {
     "@lexical/link": "0.8.0",
     "@lexical/react": "0.8.0",
     "@lexical/selection": "0.8.0",
     "@lexical/utils": "0.8.0",
-    "@visx/curve": "^2.1.0",
-    "@visx/pattern": "^3.0.0",
-    "@visx/scale": "^3.0.0",
-    "@visx/shape": "^2.12.2",
-    "@visx/threshold": "^2.12.2",
-    "@visx/visx": "2.16.0",
     "anylogger": "^1.0.11",
-    "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",
     "lexical": "0.8.0",
     "notistack": "^2.0.8",
-    "react-grid-layout": "^1.3.4",
-    "react-html-parser": "^2.0.2",
-    "react-resizable": "^3.0.5",
     "react-transition-group": "^4.4.5",
-    "sanitize-html": "^2.10.0",
     "ulog": "^2.0.0-beta.19"
   },
   "peerDependencies": {
     "@centreon/ui-context": "file:../ui-context",
     "@dnd-kit/core": "6.x",
     "@dnd-kit/sortable": "6.x",
-    "@dnd-kit/utilities": "3.x",
+    "@dnd-kit/utilities": "6.x",
     "@mui/icons-material": "5.x",
+    "@mui/lab": "5.x",
     "@mui/material": "5.x",
     "@mui/styles": "5.x",
     "@tanstack/react-query": "4.x",
@@ -135,9 +76,10 @@
     "jotai": "2.x",
     "numeral": "2.x",
     "ramda": "0.x",
+    "react": "18.x",
+    "react-dom": "18.x",
     "react-i18next": "12.x",
     "react-router-dom": "6.x",
-    "react-scale-text": "1.x",
     "resize-observer-polyfill": "1.x",
     "ts.data.json": "2.x",
     "tss-react": "4.x"

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

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

package/src/Button/Icon/index.tsx

@@ -6,7 +6,7 @@ import {
   Tooltip
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 const useStyles = makeStyles()((theme) => ({
   button: {

package/src/Button/Save/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Theme } from '@mui/material';
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-const meta = {
+export default {
   argTypes: {
     labelLoading: { control: 'text' },
     labelSave: { control: 'text' },
@@ -26,13 +26,8 @@ const meta = {
 
   component: ButtonSave,
 
-  parameters: {
-    chromatic: { delay: 300 }
-  },
   title: 'Button/Save'
-};
-
-export default meta;
+} as ComponentMeta<typeof ButtonSave>;
 
 const TemplateButtonSave: ComponentStory<typeof ButtonSave> = (args) => (
   <ButtonSave {...args} />
@@ -47,7 +42,7 @@ export const loading = (): JSX.Element => <ButtonSave loading />;
 export const succeeded = (): JSX.Element => <ButtonSave succeeded />;
 
 export const normalWithText = (): JSX.Element => (
-  <ButtonSave labelSave="Save" size="medium" />
+  <ButtonSave labelSave="Save" />
 );
 
 export const largeWithText = (): JSX.Element => (
@@ -55,7 +50,7 @@ export const largeWithText = (): JSX.Element => (
 );
 
 export const loadingWithTextAndMediumSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" size="medium" />
+  <ButtonSave loading labelLoading="Loading" />
 );
 
 export const succeededWithText = (): JSX.Element => (

package/src/Button/Save/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Theme, Tooltip } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import StartIcon from './StartIcon';
 import Content from './Content';

package/src/Dialog/Confirm/index.tsx

@@ -1,22 +1,12 @@
-import { DialogContentText, Typography } from '@mui/material';
+import DialogContentText from '@mui/material/DialogContentText';
 
 import Dialog, { Props as DialogProps } from '..';
 
-type Props = DialogProps & {
-  labelMessage?: string | null;
-  labelSecondMessage?: string | null;
-};
+type Props = DialogProps & { labelMessage?: string | null };
 
-const Confirm = ({
-  labelMessage,
-  labelSecondMessage,
-  ...rest
-}: Props): JSX.Element => (
+const Confirm = ({ labelMessage, ...rest }: Props): JSX.Element => (
   <Dialog {...rest}>
-    <DialogContentText>
-      {labelMessage && <Typography>{labelMessage}</Typography>}
-      {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}
-    </DialogContentText>
+    {labelMessage && <DialogContentText>{labelMessage}</DialogContentText>}
   </Dialog>
 );
 

package/src/Dialog/Duplicate/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '../../../test/testRenderer';
+import { render, fireEvent } from '../../testRenderer';
 
 import DialogDuplicate from '.';
 

package/src/Dialog/index.tsx

@@ -12,8 +12,6 @@ import {
   CircularProgress
 } from '@mui/material';
 
-import { DataTestAttributes } from '../@types/data-attributes';
-
 interface StylesProps {
   contentWidth?: number;
 }
@@ -37,7 +35,6 @@ export type Props = {
   confirmDisabled?: boolean;
   contentWidth?: number;
   dialogActionsClassName?: string;
-  dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
   dialogPaperClassName?: string;
   dialogTitleClassName?: string;
@@ -49,8 +46,7 @@ export type Props = {
   onConfirm: (event, value?) => void;
   open: boolean;
   submitting?: boolean;
-} & DialogProps &
-  DataTestAttributes;
+} & DialogProps;
 
 const Dialog = ({
   open,
@@ -69,7 +65,6 @@ const Dialog = ({
   dialogTitleClassName,
   dialogContentClassName,
   dialogActionsClassName,
-  dialogConfirmButtonClassName,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -96,20 +91,13 @@ const Dialog = ({
       )}
       <DialogActions className={dialogActionsClassName}>
         {onCancel && (
-          <Button
-            color="primary"
-            data-testid="Cancel"
-            disabled={cancelDisabled}
-            onClick={onCancel}
-          >
+          <Button color="primary" disabled={cancelDisabled} onClick={onCancel}>
             {labelCancel}
           </Button>
         )}
         <Button
           aria-label={labelConfirm || ''}
-          className={dialogConfirmButtonClassName}
           color="primary"
-          data-testid="Confirm"
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}

package/src/FallbackPage/FallbackPage.tsx

@@ -7,8 +7,8 @@ import { Typography } from '@mui/material';
 
 import LoadingSkeleton from '../LoadingSkeleton';
 import { CentreonLogo } from '../Logo/CentreonLogo';
-import NotAuthorizedTemplateBackgroundDark from '../@assets/images/not-authorized-template-background-dark.svg';
-import NotAuthorizedTemplateBackgroundLight from '../@assets/images/not-authorized-template-background-light.svg';
+import NotAuthorizedTemplateBackgroundDark from '../../assets/not-authorized-template-background-dark.svg';
+import NotAuthorizedTemplateBackgroundLight from '../../assets/not-authorized-template-background-light.svg';
 import { Image } from '..';
 import { useThemeMode } from '../utils/useThemeMode';
 import { typedMemo } from '../utils/typedMemo';

package/src/FileDropZone/index.tsx

@@ -17,7 +17,7 @@ import { alpha, Box, FormHelperText, Typography } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import { labelDropOr, labelSelectAFile } from './translatedLabels';
 import useDropzone, { UseDropzoneState } from './useDropzone';

package/src/Form/CollapsibleGroup.tsx

@@ -18,7 +18,6 @@ import { Group } from './Inputs/models';
 
 interface Props {
   children: React.ReactNode;
-  className?: string;
   defaultIsOpen?: boolean;
   group?: Group;
   hasGroupTitle: boolean;
@@ -51,10 +50,9 @@ const CollapsibleGroup = ({
   isCollapsible,
   group,
   hasGroupTitle,
-  defaultIsOpen = false,
-  className
+  defaultIsOpen = false
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
   const { t } = useTranslation();
 
   const [isOpen, setIsOpen] = useState(isCollapsible && defaultIsOpen);
@@ -63,8 +61,6 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
-  const containerClassName = className || '';
-
   const CollapseIcon = isOpen ? ExpandMore : ChevronRightIcon;
   const ContainerComponent = useCallback(
     ({
@@ -76,13 +72,13 @@ const CollapsibleGroup = ({
           disableGutters
           disableRipple
           aria-label={group?.name}
-          className={cx(classes.groupTitleContainer, containerClassName)}
+          className={classes.groupTitleContainer}
           onClick={toggle}
         >
           {containerComponentChildren}
         </ListItemButton>
       ) : (
-        <Box className={cx(classes.groupTitleContainer, containerClassName)}>
+        <Box className={classes.groupTitleContainer}>
           {containerComponentChildren}
         </Box>
       ),
@@ -95,9 +91,7 @@ const CollapsibleGroup = ({
         <ContainerComponent>
           {isCollapsible && <CollapseIcon />}
           <div className={classes.groupTitleIcon}>
-            <Typography className="groupText" variant="h5">
-              {t(group?.name as string)}
-            </Typography>
+            <Typography variant="h5">{t(group?.name as string)}</Typography>
             {group?.EndIcon && (
               <Tooltip
                 classes={{

package/src/Form/FormButtons.tsx

@@ -8,7 +8,8 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from '@mui/material';
 
 import SaveButton from '../Button/Save';
-import { useMemoComponent, getNormalizedId } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
+import getNormalizedId from '../utils/getNormalizedId';
 
 import {
   labelReset,
@@ -23,7 +24,8 @@ const useStyles = makeStyles()((theme) => ({
     columnGap: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    marginTop: theme.spacing(2)
   }
 }));
 

package/src/Form/Inputs/Autocomplete.tsx

@@ -9,7 +9,7 @@ import { FormHelperText, Stack } from '@mui/material';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
 import { labelPressEnterToAccept } from '../translatedLabels';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 import { SelectEntry } from '../../InputField/Select';
 
 import { InputPropsWithoutGroup, InputType } from './models';

package/src/Form/Inputs/Grid.tsx

@@ -23,16 +23,14 @@ const useStyles = makeStyles<StylesProps>()(
 );
 
 const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
-  const { classes, cx } = useStyles({
+  const { classes } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
     gridTemplateColumns: grid?.gridTemplateColumns
   });
 
-  const className = grid?.className || '';
-
   return (
-    <div className={cx(classes.gridFields, className)}>
+    <div className={classes.gridFields}>
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);