@centreon/ui 23.10.32 → 23.10.33

package/src/components/Menu/useMenu.tsx

@@ -0,0 +1,79 @@
+import { ReactElement, ReactNode, useRef } from 'react';
+
+import {
+  atom,
+  createStore,
+  useAtom,
+  Provider,
+  useStore,
+  useAtomValue
+} from 'jotai';
+import { useHydrateAtoms } from 'jotai/utils';
+
+/** state */
+
+const isMenuOpenAtom = atom(false);
+const anchorElAtom = atom<null | HTMLElement>(null);
+const onOpenAtom = atom<(() => void) | null>(null);
+const onCloseAtom = atom<(() => void) | null>(null);
+
+/** provider */
+
+type MenuProviderProps = {
+  children: ReactNode;
+  initialIsOpen?: boolean;
+  onClose?: () => void;
+  onOpen?: () => void;
+};
+
+const MenuProvider = ({
+  children,
+  initialIsOpen,
+  onOpen,
+  onClose
+}: MenuProviderProps): ReactElement => {
+  const menuStore = useRef(createStore()).current;
+
+  useHydrateAtoms(
+    [
+      [isMenuOpenAtom, initialIsOpen ?? false],
+      [anchorElAtom, null],
+      [onOpenAtom, onOpen],
+      [onCloseAtom, onClose]
+    ],
+    { store: menuStore }
+  );
+
+  return <Provider store={menuStore}>{children}</Provider>;
+};
+
+/** hook */
+
+type UseMenu = {
+  anchorEl: null | HTMLElement;
+  isMenuOpen: boolean;
+  onClose: (() => void) | null;
+  onOpen: (() => void) | null;
+  setAnchorEl: (event: null | HTMLElement) => void;
+  setIsMenuOpen: (isOpen: boolean | ((currentIsMenuOpen) => boolean)) => void;
+};
+
+const useMenu = (): UseMenu => {
+  const store = useStore();
+
+  const [isMenuOpen, setIsMenuOpen] = useAtom(isMenuOpenAtom, { store });
+  const [anchorEl, setAnchorEl] = useAtom(anchorElAtom, { store });
+  const onOpen = useAtomValue(onOpenAtom, { store });
+  const onClose = useAtomValue(onCloseAtom, { store });
+
+  return {
+    anchorEl,
+    isMenuOpen,
+    onClose,
+    onOpen,
+    setAnchorEl,
+    setIsMenuOpen
+  };
+};
+
+export { useMenu, MenuProvider };

package/src/components/Modal/index.ts

@@ -8,3 +8,5 @@ export const Modal = Object.assign(ModalRoot, {
   Body: ModalBody,
   Header: ModalHeader
 });
+
+export type { ModalActionsLabels } from './ModalActions';

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.styles.ts

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

package/src/components/Tooltip/Tooltip.tsx

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

package/src/components/Tooltip/index.ts

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

package/src/components/index.ts

@@ -3,3 +3,6 @@ export * from './Modal';
 export * from './Form';
 export * from './Header';
 export * from './DataTable';
+export * from './Layout';
+export * from './Tooltip';
+export * from './Menu';

package/src/index.ts

@@ -140,8 +140,6 @@ export { default as ActionsList } from './ActionsList';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
 
-export * from './layout/TiledListingPage';
-
 export * from './utils';
 export { default as FluidTypography } from './Typography/FluidTypography';
 export * from './Dashboard';

package/src/screens/dashboard/DashboardsDetail.stories.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable  @typescript-eslint/no-non-null-assertion */
+import React, { ReactElement } from 'react';
+
+import { Meta } from '@storybook/react';
+
+import {
+  Add as AddIcon,
+  Settings as SettingsIcon,
+  Share as ShareIcon
+} from '@mui/icons-material';
+
+import {
+  Button,
+  IconButton,
+  Menu,
+  PageHeader,
+  PageLayout
+} from '../../components';
+
+const meta: Meta = {
+  args: {
+    actions: {}
+  },
+  parameters: {
+    layout: 'fullscreen'
+  },
+  title: 'screens/Dashboards detail'
+};
+
+export default meta;
+
+const DefaultView = (args): ReactElement => {
+  const { data } = args;
+
+  return (
+    <PageLayout>
+      <PageLayout.Header>
+        <PageHeader>
+          <PageHeader.Main>
+            <PageHeader.Menu>
+              <Menu>
+                <Menu.Button />
+                <Menu.Items>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item>
+                    <Button
+                      icon={<AddIcon />}
+                      iconVariant="start"
+                      variant="ghost"
+                    >
+                      Add item
+                    </Button>
+                  </Menu.Item>
+                </Menu.Items>
+              </Menu>
+            </PageHeader.Menu>
+            <PageHeader.Title
+              description={data.dashboard.description}
+              title={data.dashboard.name}
+            />
+          </PageHeader.Main>
+        </PageHeader>
+      </PageLayout.Header>
+      <PageLayout.Body>
+        <PageLayout.Actions>
+          <IconButton
+            aria-label="edit"
+            data-testid="edit"
+            icon={<SettingsIcon />}
+            size="small"
+            variant="ghost"
+          />
+          <IconButton
+            aria-label="share"
+            data-testid="share"
+            icon={<ShareIcon />}
+            size="small"
+            variant="ghost"
+          />
+        </PageLayout.Actions>
+      </PageLayout.Body>
+    </PageLayout>
+  );
+};
+
+export const Default = {
+  args: {
+    data: {
+      dashboard: {
+        description:
+          'Description et culpa sit commodo ea enim excepteur elit. Velit irure velit tempor culpa commodo eu adipisicing eu proident ullamco.',
+        id: 1,
+        name: 'Dashboard 1'
+      }
+    }
+  },
+  render: DefaultView
+};
+
+export const AsEditLayoutState = {
+  args: {
+    ...Default.args
+  },
+  render: DefaultView
+};