@centreon/ui 23.10.108 → 23.10.109

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

@@ -87,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'
-    }
-  ]
-}
-```

package/public/mockServiceWorker.js

@@ -1,303 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-
-/**
- * Mock Service Worker (1.2.1).
- * @see https://github.com/mswjs/msw
- * - Please do NOT modify this file.
- * - Please do NOT serve this file on production.
- */
-
-const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
-const activeClientIds = new Set()
-
-self.addEventListener('install', function () {
-  self.skipWaiting()
-})
-
-self.addEventListener('activate', function (event) {
-  event.waitUntil(self.clients.claim())
-})
-
-self.addEventListener('message', async function (event) {
-  const clientId = event.source.id
-
-  if (!clientId || !self.clients) {
-    return
-  }
-
-  const client = await self.clients.get(clientId)
-
-  if (!client) {
-    return
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
-
-  switch (event.data) {
-    case 'KEEPALIVE_REQUEST': {
-      sendToClient(client, {
-        type: 'KEEPALIVE_RESPONSE',
-      })
-      break
-    }
-
-    case 'INTEGRITY_CHECK_REQUEST': {
-      sendToClient(client, {
-        type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: INTEGRITY_CHECKSUM,
-      })
-      break
-    }
-
-    case 'MOCK_ACTIVATE': {
-      activeClientIds.add(clientId)
-
-      sendToClient(client, {
-        type: 'MOCKING_ENABLED',
-        payload: true,
-      })
-      break
-    }
-
-    case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
-    }
-
-    case 'CLIENT_CLOSED': {
-      activeClientIds.delete(clientId)
-
-      const remainingClients = allClients.filter((client) => {
-        return client.id !== clientId
-      })
-
-      // Unregister itself when there are no more clients
-      if (remainingClients.length === 0) {
-        self.registration.unregister()
-      }
-
-      break
-    }
-  }
-})
-
-self.addEventListener('fetch', function (event) {
-  const { request } = event
-  const accept = request.headers.get('accept') || ''
-
-  // Bypass server-sent events.
-  if (accept.includes('text/event-stream')) {
-    return
-  }
-
-  // Bypass navigation requests.
-  if (request.mode === 'navigate') {
-    return
-  }
-
-  // Opening the DevTools triggers the "only-if-cached" request
-  // that cannot be handled by the worker. Bypass such requests.
-  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
-    return
-  }
-
-  // Bypass all requests when there are no active clients.
-  // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
-  if (activeClientIds.size === 0) {
-    return
-  }
-
-  // Generate unique request ID.
-  const requestId = Math.random().toString(16).slice(2)
-
-  event.respondWith(
-    handleRequest(event, requestId).catch((error) => {
-      if (error.name === 'NetworkError') {
-        console.warn(
-          '[MSW] Successfully emulated a network error for the "%s %s" request.',
-          request.method,
-          request.url,
-        )
-        return
-      }
-
-      // At this point, any exception indicates an issue with the original request/response.
-      console.error(
-        `\
-[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
-        request.method,
-        request.url,
-        `${error.name}: ${error.message}`,
-      )
-    }),
-  )
-})
-
-async function handleRequest(event, requestId) {
-  const client = await resolveMainClient(event)
-  const response = await getResponse(event, client, requestId)
-
-  // Send back the response clone for the "response:*" life-cycle events.
-  // Ensure MSW is active and ready to handle the message, otherwise
-  // this message will pend indefinitely.
-  if (client && activeClientIds.has(client.id)) {
-    ;(async function () {
-      const clonedResponse = response.clone()
-      sendToClient(client, {
-        type: 'RESPONSE',
-        payload: {
-          requestId,
-          type: clonedResponse.type,
-          ok: clonedResponse.ok,
-          status: clonedResponse.status,
-          statusText: clonedResponse.statusText,
-          body:
-            clonedResponse.body === null ? null : await clonedResponse.text(),
-          headers: Object.fromEntries(clonedResponse.headers.entries()),
-          redirected: clonedResponse.redirected,
-        },
-      })
-    })()
-  }
-
-  return response
-}
-
-// Resolve the main client for the given event.
-// Client that issues a request doesn't necessarily equal the client
-// that registered the worker. It's with the latter the worker should
-// communicate with during the response resolving phase.
-async function resolveMainClient(event) {
-  const client = await self.clients.get(event.clientId)
-
-  if (client?.frameType === 'top-level') {
-    return client
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
-
-  return allClients
-    .filter((client) => {
-      // Get only those clients that are currently visible.
-      return client.visibilityState === 'visible'
-    })
-    .find((client) => {
-      // Find the client ID that's recorded in the
-      // set of clients that have registered the worker.
-      return activeClientIds.has(client.id)
-    })
-}
-
-async function getResponse(event, client, requestId) {
-  const { request } = event
-  const clonedRequest = request.clone()
-
-  function passthrough() {
-    // Clone the request because it might've been already used
-    // (i.e. its body has been read and sent to the client).
-    const headers = Object.fromEntries(clonedRequest.headers.entries())
-
-    // Remove MSW-specific request headers so the bypassed requests
-    // comply with the server's CORS preflight check.
-    // Operate with the headers as an object because request "Headers"
-    // are immutable.
-    delete headers['x-msw-bypass']
-
-    return fetch(clonedRequest, { headers })
-  }
-
-  // Bypass mocking when the client is not active.
-  if (!client) {
-    return passthrough()
-  }
-
-  // Bypass initial page load requests (i.e. static assets).
-  // The absence of the immediate/parent client in the map of the active clients
-  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
-  // and is not ready to handle requests.
-  if (!activeClientIds.has(client.id)) {
-    return passthrough()
-  }
-
-  // Bypass requests with the explicit bypass header.
-  // Such requests can be issued by "ctx.fetch()".
-  if (request.headers.get('x-msw-bypass') === 'true') {
-    return passthrough()
-  }
-
-  // Notify the client that a request has been intercepted.
-  const clientMessage = await sendToClient(client, {
-    type: 'REQUEST',
-    payload: {
-      id: requestId,
-      url: request.url,
-      method: request.method,
-      headers: Object.fromEntries(request.headers.entries()),
-      cache: request.cache,
-      mode: request.mode,
-      credentials: request.credentials,
-      destination: request.destination,
-      integrity: request.integrity,
-      redirect: request.redirect,
-      referrer: request.referrer,
-      referrerPolicy: request.referrerPolicy,
-      body: await request.text(),
-      bodyUsed: request.bodyUsed,
-      keepalive: request.keepalive,
-    },
-  })
-
-  switch (clientMessage.type) {
-    case 'MOCK_RESPONSE': {
-      return respondWithMock(clientMessage.data)
-    }
-
-    case 'MOCK_NOT_FOUND': {
-      return passthrough()
-    }
-
-    case 'NETWORK_ERROR': {
-      const { name, message } = clientMessage.data
-      const networkError = new Error(message)
-      networkError.name = name
-
-      // Rejecting a "respondWith" promise emulates a network error.
-      throw networkError
-    }
-  }
-
-  return passthrough()
-}
-
-function sendToClient(client, message) {
-  return new Promise((resolve, reject) => {
-    const channel = new MessageChannel()
-
-    channel.port1.onmessage = (event) => {
-      if (event.data && event.data.error) {
-        return reject(event.data.error)
-      }
-
-      resolve(event.data)
-    }
-
-    client.postMessage(message, [channel.port2])
-  })
-}
-
-function sleep(timeMs) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, timeMs)
-  })
-}
-
-async function respondWithMock(response) {
-  await sleep(response.delay)
-  return new Response(response.body, response)
-}

package/src/@assets/README.md

@@ -1,5 +0,0 @@
-# `src/@assets` vs `public`
-
-The assets in `src/@assets` are processed by `vite` and included in the bundle.
-The assets in `public` are served as-is.
-