@centreon/ui 24.4.24 → 24.4.26

package/src/api/useMutationQuery/index.ts

@@ -1,18 +1,11 @@
 import 'ulog';
-import { useEffect } from 'react';
-
-import {
-  useMutation,
-  UseMutationOptions,
-  UseMutationResult
-} from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
-import { includes, omit } from 'ramda';
+import { includes } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
-import { useDeepCompare } from '../../utils';
 
 export enum Method {
   DELETE = 'DELETE',
@@ -22,75 +15,43 @@ export enum Method {
   PUT = 'PUT'
 }
 
-export type UseMutationQueryProps<T, TMeta> = {
-  baseEndpoint?: string;
+export interface UseMutationQueryProps<T> {
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
   fetchHeaders?: HeadersInit;
-  getEndpoint: (_meta: TMeta) => string;
+  getEndpoint: () => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-  onError?: (
-    error: ResponseError,
-    variables: T & { _meta: TMeta },
-    context: unknown
-  ) => unknown;
-  onMutate?: (variables: T & { _meta: TMeta }) => Promise<unknown> | unknown;
-  onSuccess?: (
-    data: ResponseError | T,
-    variables: T & {
-      _meta: TMeta;
-    },
-    context: unknown
-  ) => unknown;
-} & Omit<
-  UseMutationOptions<T & { _meta?: TMeta }>,
-  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess'
->;
+}
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = Omit<
-  UseMutationResult<T | ResponseError>,
-  'isError'
-> & {
+export interface UseMutationQueryState<T> {
   isError: boolean;
   isMutating: boolean;
-};
+  mutate: (payload) => void;
+  mutateAsync: (payload) => Promise<T | ResponseError>;
+}
 
-const useMutationQuery = <T extends object, TMeta>({
+const useMutationQuery = <T extends object>({
   getEndpoint,
   catchError,
   decoder,
   defaultFailureMessage,
   fetchHeaders,
   httpCodesBypassErrorSnackbar = [],
-  method,
-  onMutate,
-  onError,
-  onSuccess,
-  onSettled,
-  baseEndpoint
-}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
+  method
+}: UseMutationQueryProps<T>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useMutation<
-    T | ResponseError,
-    ResponseError,
-    T & { _meta: TMeta }
-  >({
-    mutationFn: (
-      _payload: T & { _meta: TMeta }
-    ): Promise<T | ResponseError> => {
-      const { _meta, ...payload } = _payload || {};
-
-      return customFetch<T>({
-        baseEndpoint,
+  const queryData = useMutation<T | ResponseError>(
+    (payload): Promise<T | ResponseError> =>
+      customFetch<T>({
         catchError,
         decoder,
         defaultFailureMessage,
-        endpoint: getEndpoint(_meta as TMeta),
+        endpoint: getEndpoint(),
         headers: new Headers({
           'Content-Type': 'application/x-www-form-urlencoded',
           ...fetchHeaders
@@ -98,20 +59,8 @@ const useMutationQuery = <T extends object, TMeta>({
         isMutation: true,
         method,
         payload
-      });
-    },
-    onError,
-    onMutate,
-    onSettled,
-    onSuccess: (data, variables, context) => {
-      if (data?.isError) {
-        onError?.(data, variables, context);
-
-        return;
-      }
-      onSuccess?.(data, variables, context);
-    }
-  });
+      })
+  );
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
@@ -128,17 +77,13 @@ const useMutationQuery = <T extends object, TMeta>({
     }
   };
 
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
+  manageError();
 
   return {
-    ...omit(['isError'], queryData),
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isPending
+    isMutating: queryData.isLoading,
+    mutate: queryData.mutate,
+    mutateAsync: queryData.mutateAsync
   };
 };
 

package/src/api/useRequest/index.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import 'ulog';
 import axios from 'axios';
-import { pathOr, defaultTo, path, includes, or } from 'ramda';
+import { pathOr, defaultTo, path, includes } from 'ramda';
 import anylogger from 'anylogger';
 import { JsonDecoder } from 'ts.data.json';
 
@@ -42,15 +42,12 @@ const useRequest = <TResult>({
 
   const showRequestErrorMessage = (error): void => {
     log.error(error);
+    const message = defaultTo(
+      pathOr(defaultFailureMessage, ['response', 'data', 'message']),
+      getErrorMessage
+    )(error);
 
-    const message = or(
-      pathOr(undefined, ['response', 'data', 'message'], error),
-      pathOr(defaultFailureMessage, ['response', 'data'], error)
-    );
-
-    const errorMessage = defaultTo(message, getErrorMessage?.(error));
-
-    showErrorMessage(errorMessage as string);
+    showErrorMessage(message);
   };
 
   const sendRequest = (params): Promise<TResult> => {

package/src/index.ts

@@ -2,8 +2,6 @@ import type { Props as SingleAutocompleteFieldProps } from './InputField/Select/
 
 export { default as IconButton } from './Button/Icon';
 
-export { Checkbox, CheckboxGroup } from './Checkbox';
-
 export { default as SingleAutocompleteField } from './InputField/Select/Autocomplete';
 export type { SingleAutocompleteFieldProps };
 
@@ -75,10 +73,7 @@ export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
 export { default as useRequest } from './api/useRequest';
 export { default as buildListingEndpoint } from './api/buildListingEndpoint';
-export {
-  getSearchQueryParameterValue,
-  getFoundFields
-} from './api/buildListingEndpoint/getSearchQueryParameterValue';
+export { default as getSearchQueryParameterValue } from './api/buildListingEndpoint/getSearchQueryParameterValue';
 export type {
   Parameters as ListingParameters,
   BuildListingEndpointParameters,
@@ -87,6 +82,15 @@ export type {
 } from './api/buildListingEndpoint/models';
 export { default as buildListingDecoder } from './api/buildListingDecoder';
 
+export {
+  default as useLocaleDateTimeFormat,
+  dateTimeFormat,
+  dateFormat,
+  timeFormat
+} from './utils/useLocaleDateTimeFormat';
+
+export { default as useDebounce } from './utils/useDebounce';
+export { default as useIntersectionObserver } from './utils/useIntersectionObserver';
 export { default as ContentWithCircularLoading } from './ContentWithCircularProgress';
 export {
   setUrlQueryParameters,
@@ -98,6 +102,12 @@ export type {
   ListsSearchParameter
 } from './api/buildListingEndpoint/models';
 
+export {
+  default as useMemoComponent,
+  useDeepCompare
+} from './utils/useMemoComponent';
+export { default as useCopyToClipboard } from './utils/useCopyToClipboard';
+
 export { default as MenuSkeleton } from './MenuSkeleton';
 export { default as PopoverMenu } from './PopoverMenu';
 
@@ -116,7 +126,7 @@ export { default as Module } from './Module/index';
 export { default as LicensedModule } from './Module/LicensedModule';
 export { default as SnackbarProvider } from './Snackbar/SnackbarProvider';
 export { default as PersistentTooltip } from './InputField/Search/PersistentTooltip';
-export * from './Form';
+export { default as Form, GroupDirection } from './Form';
 export { InputType } from './Form/Inputs/models';
 export type {
   InputProps,
@@ -126,10 +136,6 @@ export type {
 export { default as Responsive } from './Responsive';
 export { default as useFetchQuery } from './api/useFetchQuery';
 export { default as useMutationQuery, Method } from './api/useMutationQuery';
-export {
-  default as useGraphQuery,
-  resourceTypeQueryParameter
-} from './api/useGraphQuery';
 export { default as QueryProvider } from './api/QueryProvider';
 export {
   default as FileDropZone,
@@ -137,33 +143,17 @@ export {
 } from './FileDropZone';
 export type { CustomDropZoneContentProps } from './FileDropZone';
 export { default as TestQueryProvider } from './api/TestQueryProvider';
+export * from './utils/useThemeMode';
+export * from './utils/typedMemo';
 export * from './FallbackPage/FallbackPage';
 export * from './Logo/CentreonLogo';
 export * from './TopCounterElements';
 export { default as Image, ImageVariant } from './Image/Image';
 export { default as WallpaperPage } from './WallpaperPage';
 export { RichTextEditor } from './RichTextEditor';
-export {
-  default as ActionsList,
-  ActionsListActionDivider
-} from './ActionsList';
-export type { ActionsListActions } from './ActionsList';
-export type { ActionVariants } from './ActionsList/models';
+export { default as ActionsList } from './ActionsList';
+export { getStatusColors, SeverityCode } from './utils/statuses';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
-
-export * from './utils';
-export { default as FluidTypography } from './Typography/FluidTypography';
-export { default as EllipsisTypography } from './Typography/EllipsisTypography';
-export * from './Dashboard';
-export * from './Graph';
-export type { LineChartData } from './Graph/common/models';
-export * from './Graph/common/timeSeries';
-
-export { default as TimePeriods } from './TimePeriods';
-export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
-export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
-export * from './ParentSize';
-export { default as Subtitle } from './Typography/Subtitle';
 export { default as TablePagination } from './Listing/ActionBar/Pagination';
 export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs, startsWith } from 'ramda';
+import { fromPairs } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,10 +25,6 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
-      if (startsWith('/', value)) {
-        return [key, value];
-      }
-
       return [key, JSON.parse(value)];
     }
   );

package/src/storyshots.test.js

@@ -0,0 +1,52 @@
+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/{test → src}/testRenderer.tsx

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

package/src/utils/getNormalizedId.ts

@@ -1,3 +1,5 @@
-export const getNormalizedId = (idToNormalized: string): string => {
+const getNormalizedId = (idToNormalized: string): string => {
   return idToNormalized?.replace(/[^A-Z0-9]+/gi, '');
 };
+
+export default getNormalizedId;

package/src/utils/useCopyToClipboard.ts

@@ -10,8 +10,7 @@ interface Props {
   errorMessage: string;
   successMessage: string;
 }
-
-export const useCopyToClipboard = ({
+const useCopyToClipboard = ({
   successMessage,
   errorMessage
 }: Props): Result => {
@@ -54,3 +53,5 @@ export const useCopyToClipboard = ({
 
   return { copy };
 };
+
+export default useCopyToClipboard;

package/src/utils/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback } from 'react';
 
 interface Props {
   functionToDebounce: (...args) => void;
@@ -6,17 +6,12 @@ interface Props {
   wait: number;
 }
 
-export const useDebounce = ({
+const useDebounce = ({
   functionToDebounce,
   wait,
   memoProps = []
 }: Props): ((...args) => void) => {
   const timeoutRef = useRef<number | null>(null);
-  const ref = useRef();
-
-  useEffect(() => {
-    ref.current = functionToDebounce;
-  }, [functionToDebounce]);
 
   return useCallback((...args): void => {
     if (timeoutRef.current) {
@@ -24,7 +19,9 @@ export const useDebounce = ({
     }
 
     timeoutRef.current = setTimeout(() => {
-      ref.current?.(...args);
+      functionToDebounce(...args);
     }, wait);
   }, memoProps);
 };
+
+export default useDebounce;

package/src/utils/useDeepCallback.ts

@@ -7,9 +7,11 @@ interface UseDeepCallback<TParameters, TReturn, TMemoProps> {
   deps: Array<TMemoProps>;
 }
 
-export const useDeepCallback = <TParameters, TReturn, TMemoProps>({
+const useDeepCallback = <TParameters, TReturn, TMemoProps>({
   deps,
   callback
 }: UseDeepCallback<TParameters, TReturn, TMemoProps>): ((
   props: TParameters
 ) => TReturn) => useCallback((props) => callback(props), useDeepCompare(deps));
+
+export default useDeepCallback;

package/src/utils/useDeepMemo.ts

@@ -7,8 +7,10 @@ interface UseDeepMemo<TVariable, TMemoProps> {
   variable: TVariable;
 }
 
-export const useDeepMemo = <TVariable, TMemoProps>({
+const useDeepMemo = <TVariable, TMemoProps>({
   deps,
   variable
 }: UseDeepMemo<TVariable, TMemoProps>): TVariable =>
   useMemo(() => variable, useDeepCompare(deps));
+
+export default useDeepMemo;

package/src/utils/useIntersectionObserver.ts

@@ -2,18 +2,16 @@ import { useRef, useCallback } from 'react';
 
 interface HookParam {
   action: () => void;
-  intersectionObserverOptions?: IntersectionObserverInit;
   loading: boolean;
   maxPage: number;
   page: number;
 }
 
-export const useIntersectionObserver = ({
+const useIntersectionObserver = ({
   maxPage,
   page,
   loading,
-  action,
-  intersectionObserverOptions
+  action
 }: HookParam): ((node) => void) => {
   const observer = useRef<IntersectionObserver | null>(null);
   const lastElementRef = useCallback(
@@ -32,7 +30,7 @@ export const useIntersectionObserver = ({
         if (entry.isIntersecting && page < maxPage) {
           action();
         }
-      }, intersectionObserverOptions);
+      });
 
       if (node && observer.current) {
         observer.current.observe(node);
@@ -43,3 +41,5 @@ export const useIntersectionObserver = ({
 
   return lastElementRef;
 };
+
+export default useIntersectionObserver;

package/src/utils/useKeyObserver.tsx

@@ -4,7 +4,7 @@ interface UseKeyObserverProps {
   isShiftKeyDown: boolean;
 }
 
-export const useKeyObserver = (): UseKeyObserverProps => {
+const useKeyObserver = (): UseKeyObserverProps => {
   const [isShiftKeyDown, setIsShiftKeyDown] = useState<boolean>(false);
 
   const pressShift = (): void => setIsShiftKeyDown(true);
@@ -34,3 +34,5 @@ export const useKeyObserver = (): UseKeyObserverProps => {
     isShiftKeyDown
   };
 };
+
+export default useKeyObserver;

package/src/utils/useLocaleDateTimeFormat/index.test.tsx

@@ -10,7 +10,7 @@ import { Provider, useSetAtom } from 'jotai';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import { useLocaleDateTimeFormat } from '.';
+import useLocaleDateTimeFormat from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -1,7 +1,6 @@
 import dayjs from 'dayjs';
 import humanizeDuration from 'humanize-duration';
 import { useAtomValue } from 'jotai';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 import { userAtom } from '@centreon/ui-context';
 
@@ -21,8 +20,6 @@ export interface LocaleDateTimeFormat {
   toTime: (date: Date | string) => string;
 }
 
-dayjs.extend(localizedFormat);
-
 const dateFormat = 'L';
 const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;
@@ -90,4 +87,5 @@ const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
   };
 };
 
-export { dateTimeFormat, dateFormat, timeFormat, useLocaleDateTimeFormat };
+export default useLocaleDateTimeFormat;
+export { dateTimeFormat, dateFormat, timeFormat };

package/src/utils/useLocaleDateTimeFormat/localeFallback.test.tsx

@@ -10,7 +10,7 @@ import { render, RenderResult } from '@testing-library/react';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import { useLocaleDateTimeFormat } from '.';
+import useLocaleDateTimeFormat from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useMemoComponent.ts

@@ -19,7 +19,7 @@ interface MemoComponent {
   memoProps: Array<unknown>;
 }
 
-export const useMemoComponent = ({
+const useMemoComponent = ({
   Component,
   memoProps
 }: MemoComponent): JSX.Element =>

package/testRunner.js

@@ -0,0 +1,36 @@
+/* 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

@@ -0,0 +1,29 @@
+{
+  "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

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

package/public/README.md

@@ -1,39 +0,0 @@
-> The assets in `public` are served as-is.
-
-
----
-
-### `public/fonts` → `@centreon/ui/fonts` alias
-
-The `ThemeProvider` specifies the `@font-face` for MUI.
-It imports the fonts using the `@centreon/ui/fonts` alias, but does not bundle them.
-
-
-
-#### ⚠️ **note** 
-When the `@centreon/ui` package is used as non-build dependency, then the `@centreon/ui/fonts` alias need to be added in the webpack config, and configured to handle the asset types.
-```js
-// webpack.config.js
-
-// alias
-resolve: {
-  alias: {
-    '@centreon/ui/fonts': path.resolve(
-      './node_modules/@centreon/ui/public/fonts'
-    )
-  }
-}
-
-// asset types
-module: {
-  rules: [
-    {
-      generator: {
-          filename: '[name][ext]'
-      },
-      test: /\.(woff|woff2|eot|ttf|otf)$/i,
-      type: 'asset/resource'
-    }
-  ]
-}
-```