@centreon/ui 23.10.2 → 23.10.3-0

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -7,7 +7,7 @@ import {
   resetMocks,
   mockResponse,
   getFetchCall
-} from '../../../../testRenderer';
+} from '../../../../../test/testRenderer';
 import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import { ConditionsSearchParameter } from '../../../../api/buildListingEndpoint/models';
 import TestQueryProvider from '../../../../api/TestQueryProvider';

package/src/InputField/Select/Autocomplete/Draggable/index.stories.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
 import { isNil, not } from 'ramda';
-import withMock from 'storybook-addon-mock';
 
 import { Tooltip, Typography } from '@mui/material';
 
@@ -15,7 +14,6 @@ import MultiDraggableAutocompleteField from './Multi';
 import { ItemActionProps } from '.';
 
 export default {
-  decorators: [withMock],
   title: 'InputField/Autocomplete/Draggable'
 };
 

package/src/Listing/index.test.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { prop } from 'ramda';
 
-import { render, fireEvent, within } from '../testRenderer';
+import { render, fireEvent, within } from '../../test/testRenderer';
 
 import { ColumnType } from './models';
 import { labelAddColumns } from './translatedLabels';

package/src/Logo/CentreonLogo.tsx

@@ -6,8 +6,8 @@ import { makeStyles } from 'tss-react/mui';
 import { Image, ImageVariant } from '..';
 import LoadingSkeleton from '../LoadingSkeleton';
 import { useThemeMode } from '../utils/useThemeMode';
-import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
-import CentreonLogoDark from '../../assets/centreon-logo-one-line-dark.svg';
+import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+import CentreonLogoDark from '../@assets/brand/centreon-logo-one-line-dark.svg';
 
 import { labelCentreonLogo } from './translatedLabels';
 

package/src/Module/LicensedModule/LicenseCheck/index.stories.tsx

@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import withMock from 'storybook-addon-mock';
 import { makeStyles } from 'tss-react/mui';
 
 import { Alert, Container } from '@mui/material';
@@ -20,7 +19,6 @@ export default {
     moduleName: { control: 'text' }
   },
   component: LicenseCheck,
-  decorators: [withMock],
   title: 'LicenseCheck'
 } as ComponentMeta<typeof LicenseCheck>;
 

package/src/Panel/Section/index.test.tsx

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

package/src/ThemeProvider/index.tsx

@@ -17,6 +17,10 @@ import { autocompleteClasses } from '@mui/material/Autocomplete';
 import { ThemeOptions } from '@mui/material/styles/createTheme';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
+import RobotoLightWoff2 from '@centreon/ui/fonts/roboto-light-webfont.woff2';
+import RobotoRegularWoff2 from '@centreon/ui/fonts/roboto-regular-webfont.woff2';
+import RobotoMediumWoff2 from '@centreon/ui/fonts/roboto-medium-webfont.woff2';
+import RobotoBoldWoff2 from '@centreon/ui/fonts/roboto-bold-webfont.woff2';
 
 import { getPalette } from './palettes';
 
@@ -180,6 +184,30 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 300;
+          src: local('Roboto'), local('Roboto-Light'), url(${RobotoLightWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 400;
+          src: local('Roboto'), local('Roboto-Regular'), url(${RobotoRegularWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 500;
+          src: local('Roboto'), local('Roboto-Medium'), url(${RobotoMediumWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 600;
+          src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
+        }
       `
     },
     MuiInputBase: {
@@ -253,7 +281,8 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     caption: {
       fontSize: '0.625rem'
-    }
+    },
+    fontFamily: 'Roboto, Arial'
   }
 });
 

package/src/WallpaperPage/index.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 
-import image from '../../assets/not-authorized-template-background-light.svg';
+import image from '../@assets/images/not-authorized-template-background-light.svg';
 
 import WallpaperPage from '.';
 

package/src/Wizard/ActionsBar.test.tsx

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

package/src/Wizard/index.test.tsx

@@ -8,7 +8,7 @@ import {
   waitFor,
   screen,
   RenderResult
-} from '../testRenderer';
+} from '../../test/testRenderer';
 
 import { StepComponentProps } from './models';
 

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/cypress/support/commands.ts

@@ -1,19 +0,0 @@
-import { mount } from 'cypress/react18';
-import '@testing-library/cypress/add-commands';
-
-Cypress.Commands.add('mount', ({ Component, options }: MountProps) => {
-    return mount(Component, options);
-  });
-  
-  interface MountProps {
-    Component: JSX.Element;
-    options?: object;
-  }
-
-declare global {
-    namespace Cypress {
-      interface Chainable {
-        mount: ({ Component, options = {} }: MountProps) => Cypress.Chainable;
-      }
-    }
-  }

package/cypress/support/component-index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>

package/cypress/support/component.tsx

@@ -1,5 +0,0 @@
-import './commands';
-
-import enableVisualTesting from '@centreon/js-config/cypress/component/enableVisualTesting';
-
-enableVisualTesting();

package/cypress.config.ts

@@ -1,5 +0,0 @@
-const defineCypressConfig = require('@centreon/js-config/cypress/component/configuration');
-
-module.exports = defineCypressConfig({
-  specPattern: './src/**/*.cypress.spec.tsx'
-});

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/setupTests.js

@@ -1,86 +0,0 @@
-/* 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';
-
-const mockedMatchMedia = () => ({
-  addListener: () => {},
-  matches: false,
-  removeListener: () => {}
-});
-
-window.matchMedia = window.matchMedia || mockedMatchMedia;
-
-document.createRange = () => ({
-  commonAncestorContainer: {
-    nodeName: 'BODY',
-    ownerDocument: document
-  },
-  setEnd: () => {},
-  setStart: () => {}
-});
-
-global.IntersectionObserver = class IntersectionObserver {
-  observe() {
-    this.a = '';
-
-    return null;
-  }
-
-  disconnect() {
-    this.a = '';
-
-    return null;
-  }
-};
-
-Object.defineProperty(window, 'matchMedia', {
-  value: jest.fn().mockImplementation((query) => ({
-    addEventListener: jest.fn(),
-    addListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-    matches: false,
-    media: query,
-    onchange: null,
-    removeEventListener: jest.fn(),
-    removeListener: jest.fn()
-  })),
-  writable: true
-});
-
-Object.defineProperty(Image.prototype, 'onload', {
-  get() {
-    return this._onload;
-  },
-  set(onload) {
-    onloadRef = onload;
-    this._onload = onload;
-  }
-});
-Object.defineProperty(Image.prototype, 'onerror', {
-  get() {
-    return this._onerror;
-  },
-  set(onerror) {
-    onerrorRef = onerror;
-    this._onerror = onerror;
-  }
-});
-
-i18n.use(initReactI18next).init({
-  fallbackLng: 'en',
-  keySeparator: false,
-  lng: 'en',
-  nsSeparator: false,
-  resources: {}
-});
-
-window.Image = () => ({
-  onerror: () => {},
-  onload: () => {},
-  src: null
-});
-
-fetchMock.enableMocks();

package/src/storyshots.test.js

@@ -1,52 +0,0 @@
-import initStoryshots from '@storybook/addon-storyshots';
-import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
-
-jest.unmock('axios');
-
-const getMatchOptions = () => {
-  return {
-    failureThreshold: 0.2,
-    failureThresholdType: 'percent'
-  };
-};
-
-const beforeScreenshot = async (page) => {
-  await page.addStyleTag({
-    content: `
-    *,
-    *::before,
-    *::after {
-      animation-delay: -1s !important;
-      animation-duration: 0s !important;
-      animation-iteration-count: 1 !important;
-      background-attachment: initial !important;
-      scroll-behavior: auto !important;
-      transition-duration: 0s !important;
-      transition: none !important;
-    }`
-  });
-
-  await page.setViewport({
-    height: 1000,
-    width: 1000
-  });
-};
-
-const getStoryKindRegex = () => {
-  const config = JSON.parse(process.env.TEST_CONFIGURATION);
-  if (!config.story) {
-    return null;
-  }
-
-  return new RegExp(`^(${config.story || ''})$`, 'g');
-};
-
-initStoryshots({
-  storyKindRegex: getStoryKindRegex(),
-  suite: 'Image StoryShots',
-  test: imageSnapshot({
-    beforeScreenshot,
-    getMatchOptions,
-    storybookUrl: `file://${__dirname}/../.out`
-  })
-});

package/src/testRenderer.tsx

@@ -1,56 +0,0 @@
-import { ReactElement } from 'react';
-
-import {
-  render as rtlRender,
-  RenderOptions,
-  RenderResult
-} from '@testing-library/react';
-import fetchMock, { MockParams } from 'jest-fetch-mock';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-import ThemeProvider from './StoryBookThemeProvider';
-
-interface Props {
-  children: ReactElement;
-}
-
-const ThemeProviderWrapper = ({ children }: Props): JSX.Element => {
-  return <ThemeProvider themeMode={ThemeMode.light}>{children}</ThemeProvider>;
-};
-
-const render = (ui: ReactElement, options?: RenderOptions): RenderResult =>
-  rtlRender(ui, {
-    wrapper: ThemeProviderWrapper as (props) => ReactElement | null,
-    ...options
-  });
-
-// re-export everything
-export * from '@testing-library/react';
-
-// override render method
-export { render };
-
-interface MockResponse {
-  data: object | unknown;
-  options?: MockParams;
-}
-
-export const mockResponse = ({ data, options }: MockResponse): void => {
-  fetchMock.mockResponse(JSON.stringify(data), options);
-};
-
-export const mockResponseOnce = ({ data, options }: MockResponse): void => {
-  fetchMock.once(JSON.stringify(data), options);
-};
-
-export const resetMocks = (): void => {
-  fetchMock.resetMocks();
-};
-
-export const getFetchCall = (
-  index,
-  secondIndex = 0
-): string | Request | undefined | RequestInit => {
-  return fetchMock.mock.calls[index][secondIndex];
-};

package/testRunner.js

@@ -1,36 +0,0 @@
-/* eslint-disable array-callback-return */
-/* eslint-disable consistent-return */
-const config = {
-  story: null
-};
-
-const argv = process.argv.slice(0, 2);
-
-process.argv.reduce((cmd, arg) => {
-  if (cmd) {
-    config[cmd] = arg;
-
-    return;
-  }
-
-  if (arg.startsWith('--')) {
-    const sub = arg.substring('--'.length);
-    if (Object.keys(config).includes(sub)) {
-      if (typeof config[sub] === 'boolean') {
-        config[cmd] = true;
-
-        return;
-      }
-
-      return sub;
-    }
-  }
-
-  argv.push(arg);
-});
-
-process.argv = argv;
-
-process.env.TEST_CONFIGURATION = JSON.stringify(config);
-
-require('jest/bin/jest');

package/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "extends": "../js-config/tsconfig/index.json",
-  "compilerOptions": {
-    "baseUrl": "./",
-    "typeRoots": [
-      "./types",
-      "./node_modules/@types"
-    ],
-    "outDir": "./dist",
-    "declaration": true,
-    "skipLibCheck": true,
-    "pretty": true,
-    "emitDeclarationOnly": true,
-    "types": [],
-    "esModuleInterop": true
-  },
-  "include": [
-    "./src",
-    "./types"
-  ],
-  "exclude": [
-    "./node_modules",
-    "./dist",
-    "./src/**/*.test.ts",
-    "./src/**/*.test.tsx",
-    "./src/**/*.stories.tsx",
-    "../../node_modules",
-  ]
-}

package/types/declarations.d.ts

@@ -1,9 +0,0 @@
-declare module '*.scss' {
-  export const content: { [className: string]: string };
-  export default content;
-}
-
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}