@centreon/ui 24.4.21 → 24.4.22

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.stories.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useEffect, useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TextOverflowTooltip } from './TextOverflowTooltip';
+
+const meta: Meta<typeof TextOverflowTooltip> = {
+  args: {},
+  component: TextOverflowTooltip,
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof TextOverflowTooltip>;
+
+export const Default: Story = {
+  args: {
+    label:
+      'Qui deserunt pariatur quis. Duis nisi velit culpa labore ipsum reprehenderit sunt laborum anim sint quis magna consequat amet. Voluptate tempor nostrud eiusmod enim qui reprehenderit.'
+  },
+  render: ({ label, ...args }) => {
+    const [labelValue, setLabelValue] = useState(label);
+    useEffect(() => setLabelValue(label), [label]);
+
+    return (
+      <TextOverflowTooltip {...args} data-testid="tooltip" label={labelValue}>
+        <p
+          data-testid="paragraph"
+          style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: '40vw'
+          }}
+        >
+          {labelValue}
+        </p>
+      </TextOverflowTooltip>
+    );
+  }
+};
+
+export const AsMultiLine: Story = {
+  args: {
+    ...Default.args
+  },
+  render: ({ label, ...args }) => {
+    const [labelValue, setLabelValue] = useState(label);
+    useEffect(() => setLabelValue(label), [label]);
+
+    return (
+      <TextOverflowTooltip {...args} label={labelValue}>
+        <p
+          style={{
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: '2',
+            display: '-webkit-box',
+            overflow: 'hidden',
+            width: '40vw'
+          }}
+        >
+          {labelValue}
+        </p>
+      </TextOverflowTooltip>
+    );
+  }
+};

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.styles.ts

@@ -0,0 +1,5 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(() => ({
+  textOverflowTooltip: {}
+}));

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.tsx

@@ -0,0 +1,115 @@
+import { ReactElement, useCallback, useEffect, useRef } from 'react';
+
+import { atom, useAtom } from 'jotai';
+
+import { Tooltip, TooltipProps } from '../Tooltip';
+import { useResizeObserver } from '../../../utils/useResizeObserver';
+
+import { useStyles } from './TextOverflowTooltip.styles';
+
+type TextOverflowTooltipProps = Omit<TooltipProps, 'followCursor' | 'hasCaret'>;
+
+/** @description
+ * This component is used to display a tooltip when the text is too long, and displays the full text on hover.
+ *
+ * It's up to the child component to define it's `width` / `max-width`, and ellipsis.
+ *
+ * For single lines use :
+ * ```
+ *  width: var(--width-of-the-text);
+ *  white-space: nowrap;
+ * ```
+ *
+ * For multi-lines use :
+ * ```
+ *  width: var(--width-of-the-text);
+ *  display: -webkit-box;
+ *  -webkit-box-orient: vertical;
+ *  -webkit-line-clamp: var(--max-lines-of-the-text);
+ * ```
+ */
+
+const TextOverflowTooltip = ({
+  children,
+  label,
+  position = 'bottom',
+  isOpen,
+  ...tooltipProps
+}: TextOverflowTooltipProps): ReactElement => {
+  const { classes } = useStyles();
+
+  const stateAtom = useRef(
+    atom<{
+      hasOverflow: boolean;
+      isOpen: boolean;
+    }>({ hasOverflow: false, isOpen: false })
+  ).current;
+
+  const [state, setState] = useAtom(stateAtom);
+
+  const onMouseEnter = useCallback(
+    () =>
+      state.hasOverflow &&
+      setState({
+        ...state,
+        isOpen: true
+      }),
+    [state.hasOverflow]
+  );
+
+  const onMouseLeave = useCallback(
+    () =>
+      state.hasOverflow &&
+      setState({
+        ...state,
+        isOpen: false
+      }),
+    [state.hasOverflow]
+  );
+
+  const elRef = useRef<HTMLDivElement>(null);
+
+  const onResize = (): void => {
+    const { firstElementChild: el } = elRef.current || {};
+    if (el instanceof HTMLElement) {
+      setState({
+        ...state,
+        hasOverflow:
+          el.scrollWidth > el.offsetWidth || el.scrollHeight > el.offsetHeight
+      });
+    }
+  };
+
+  useResizeObserver({
+    onResize,
+    ref: elRef
+  });
+
+  useEffect(() => {
+    if (isOpen) setState({ ...state, isOpen });
+    onResize();
+  }, [isOpen, label]);
+
+  return (
+    <Tooltip
+      followCursor
+      hasCaret={false}
+      isOpen={state.isOpen}
+      label={label}
+      position={position}
+      {...tooltipProps}
+    >
+      <div
+        className={classes.textOverflowTooltip}
+        data-has-overflow={state.hasOverflow}
+        ref={elRef}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
+
+export { TextOverflowTooltip };

package/src/components/Tooltip/TextOverflowTooltip/index.tsx

@@ -0,0 +1 @@
+export * from './TextOverflowTooltip';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Info as InfoIcon } from '@mui/icons-material';
+
+import { Tooltip } from './Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  argTypes: {
+    position: {
+      control: {
+        options: ['top', 'bottom', 'left', 'right']
+      }
+    }
+  },
+  component: Tooltip,
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    children: <InfoIcon />,
+    label: 'Tooltip content'
+  }
+};
+
+export const WrappedContent: Story = {
+  args: {
+    children: <InfoIcon />,
+    followCursor: false,
+    hasCaret: true,
+    isOpen: true,
+    label:
+      'Qui deserunt pariatur quis. Duis nisi velit culpa labore ipsum reprehenderit sunt laborum anim sint quis magna consequat amet. Voluptate tempor nostrud eiusmod enim qui reprehenderit.',
+    position: 'right'
+  }
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,57 @@
+import { ReactElement, ReactNode } from 'react';
+
+import {
+  Tooltip as MuiTooltip,
+  TooltipProps as MuiTooltipProps
+} from '@mui/material';
+
+import { AriaLabelingAttributes } from '../../@types/aria-attributes';
+import { DataTestAttributes } from '../../@types/data-attributes';
+
+export type TooltipProps = {
+  children: ReactElement;
+  followCursor?: boolean;
+  hasCaret?: boolean;
+  isOpen?: boolean;
+  label: ReactNode;
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'left-end'
+    | 'left-start'
+    | 'right-end'
+    | 'right-start'
+    | 'top-end'
+    | 'top-start';
+} & AriaLabelingAttributes &
+  DataTestAttributes &
+  Omit<MuiTooltipProps, 'title'>;
+
+const Tooltip = ({
+  children,
+  label,
+  position = 'bottom',
+  followCursor = true,
+  isOpen,
+  hasCaret = false,
+  ...attr
+}: TooltipProps): ReactElement => {
+  return (
+    <MuiTooltip
+      arrow={hasCaret}
+      followCursor={followCursor}
+      open={isOpen}
+      placement={position}
+      title={label}
+      {...attr}
+    >
+      {children}
+    </MuiTooltip>
+  );
+};
+
+export { Tooltip };

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+export * from './ConfirmationTooltip';

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export * from './Button';
+export * from './Modal';
+export * from './Form';
+export * from './Header';
+export * from './DataTable';
+export * from './Layout';
+export * from './Tooltip';
+export * from './Menu';
+export * from './List';
+export * from './ItemComposition';
+export * from './Avatar';
+export * from './CollapsibleItem';
+export * from './Inputs';

package/src/index.ts

@@ -2,6 +2,8 @@ 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 };
 
@@ -73,7 +75,10 @@ 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 { default as getSearchQueryParameterValue } from './api/buildListingEndpoint/getSearchQueryParameterValue';
+export {
+  getSearchQueryParameterValue,
+  getFoundFields
+} from './api/buildListingEndpoint/getSearchQueryParameterValue';
 export type {
   Parameters as ListingParameters,
   BuildListingEndpointParameters,
@@ -82,15 +87,6 @@ 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,
@@ -102,12 +98,6 @@ 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';
 
@@ -126,7 +116,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 { default as Form, GroupDirection } from './Form';
+export * from './Form';
 export { InputType } from './Form/Inputs/models';
 export type {
   InputProps,
@@ -136,6 +126,10 @@ 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,
@@ -143,17 +137,33 @@ 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 } from './ActionsList';
-export { getStatusColors, SeverityCode } from './utils/statuses';
+export {
+  default as ActionsList,
+  ActionsListActionDivider
+} from './ActionsList';
+export type { ActionsListActions } from './ActionsList';
+export type { ActionVariants } from './ActionsList/models';
 
 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 } from 'ramda';
+import { fromPairs, startsWith } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,6 +25,10 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
+      if (startsWith('/', value)) {
+        return [key, value];
+      }
+
       return [key, JSON.parse(value)];
     }
   );