@centreon/ui 23.10.25-feature-MON-19319.0 → 23.10.25

package/src/components/Header/PageHeader/index.ts

@@ -1,12 +0,0 @@
-import { PageHeader as PageHeaderRoot } from './PageHeader';
-import { PageHeaderMain } from './PageHeaderMain';
-import { PageHeaderMenu } from './PageHeaderMenu';
-import { PageHeaderTitle } from './PageHeaderTitle';
-import { PageHeaderActions } from './PageHeaderActions';
-
-export const PageHeader = Object.assign(PageHeaderRoot, {
-  Actions: PageHeaderActions,
-  Main: PageHeaderMain,
-  Menu: PageHeaderMenu,
-  Title: PageHeaderTitle
-});

package/src/components/Layout/AreaIndicator.styles.ts

@@ -1,33 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  areaIndicator: {
-    '& .areaIndicator': {
-      left: theme.spacing(10)
-    },
-    '& label:first-of-type': {
-      border: '1px dashed #9747FF7F',
-      borderRadius: '4px',
-      color: '#9747FFFF',
-      fontSize: '0.75rem',
-      fontWeight: 500,
-      left: theme.spacing(1),
-      padding: theme.spacing(0.125, 1),
-      position: 'absolute',
-      top: theme.spacing(0.75)
-    },
-    '&[data-depth="1"]': {
-      '& label:first-of-type': {
-        '&:before': {
-          content: '"+ "'
-        },
-        left: theme.spacing(10)
-      }
-    },
-
-    backgroundColor: '#9747FF19',
-    minHeight: theme.spacing(4),
-
-    position: 'relative'
-  }
-}));

package/src/components/Layout/AreaIndicator.tsx

@@ -1,35 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './AreaIndicator.styles';
-
-type AreaIndicatorProps = {
-  children?: ReactNode | Array<ReactNode>;
-  depth?: number;
-  height?: number | string;
-  name: string;
-  width?: number | string;
-};
-
-const AreaIndicator = ({
-  children,
-  name = 'area',
-  width = '100%',
-  height = '100%',
-  depth = 0
-}: AreaIndicatorProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div
-      className={classes.areaIndicator}
-      data-depth={depth}
-      style={{ height, width }}
-    >
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label>{name}</label>
-      {children}
-    </div>
-  );
-};
-
-export { AreaIndicator };

package/src/components/Layout/PageLayout/PageLayout.stories.tsx

@@ -1,81 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { AreaIndicator } from '../AreaIndicator';
-import { Default as DefaultPageHeaderStory } from '../../Header/PageHeader/PageHeader.stories';
-
-import { PageLayout } from './index';
-
-const meta: Meta<typeof PageLayout> = {
-  argTypes: {
-    variant: {
-      control: {
-        options: ['default', 'fixed-header']
-      }
-    }
-  },
-  component: PageLayout,
-  parameters: {
-    layout: 'fullscreen'
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof PageLayout>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <PageLayout.Header>
-          <AreaIndicator name="header" />
-        </PageLayout.Header>
-        <PageLayout.Body>
-          <AreaIndicator height="100vh" name="body">
-            <PageLayout.Actions>
-              <AreaIndicator depth={1} name="actions" />
-            </PageLayout.Actions>
-          </AreaIndicator>
-        </PageLayout.Body>
-      </>
-    ),
-    variant: 'default'
-  }
-};
-
-export const FixedHeader: Story = {
-  args: {
-    children: (
-      <>
-        <PageLayout.Header>
-          <AreaIndicator name="header" />
-        </PageLayout.Header>
-        <PageLayout.Body hasBackground>
-          <AreaIndicator height="100vh" name="body">
-            <PageLayout.Actions>
-              <AreaIndicator depth={1} name="actions" />
-            </PageLayout.Actions>
-          </AreaIndicator>
-        </PageLayout.Body>
-      </>
-    ),
-    variant: 'fixed-header'
-  }
-};
-
-export const DefaultWithPageHeader: Story = {
-  args: {
-    children: (
-      <>
-        <PageLayout.Header>
-          {/* eslint-disable react/jsx-pascal-case */}
-          {/* @ts-expect-error storybook story render method not being recognised */}
-          <DefaultPageHeaderStory.render {...DefaultPageHeaderStory.args} />
-        </PageLayout.Header>
-        <PageLayout.Body>
-          <AreaIndicator height="100vh" name="body" />
-        </PageLayout.Body>
-      </>
-    ),
-    variant: 'default'
-  }
-};

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -1,30 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  pageLayout: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%'
-  },
-  pageLayoutActions: {
-    paddingBottom: theme.spacing(2.5)
-  },
-  pageLayoutBody: {
-    '&[data-has-background="true"]': {
-      backgroundColor: theme.palette.layout.body.background
-    },
-    padding: theme.spacing(3, 4, 5)
-  },
-  pageLayoutHeader: {
-    '[data-variant="fixed-header"] &': {
-      backgroundColor: theme.palette.layout.header.background,
-      borderBottom: `1px solid ${theme.palette.layout.header.border}`,
-      padding: theme.spacing(5, 4, 2),
-      position: 'sticky',
-      top: 0,
-      zIndex: `calc(${theme.zIndex.mobileStepper} - 100)`
-    },
-
-    padding: theme.spacing(5, 4, 0)
-  }
-}));

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -1,21 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageLayout.styles';
-
-type PageLayoutProps = {
-  children: Array<ReactNode> | ReactNode;
-  variant?: 'default' | 'fixed-header';
-};
-
-export const PageLayout = ({
-  children,
-  variant = 'default'
-}: PageLayoutProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <section className={classes.pageLayout} data-variant={variant}>
-      {children}
-    </section>
-  );
-};

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -1,15 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageLayout.styles';
-
-type PageLayoutActionsProps = {
-  children: Array<ReactNode> | ReactNode;
-};
-
-export const PageLayoutActions = ({
-  children
-}: PageLayoutActionsProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <section className={classes.pageLayoutActions}>{children}</section>;
-};

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -1,24 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageLayout.styles';
-
-type PageLayoutBodyProps = {
-  children: Array<ReactNode> | ReactNode;
-  hasBackground?: boolean;
-};
-
-export const PageLayoutBody = ({
-  children,
-  hasBackground = false
-}: PageLayoutBodyProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <section
-      className={classes.pageLayoutBody}
-      data-has-background={hasBackground}
-    >
-      {children}
-    </section>
-  );
-};

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-import { useStyles } from './PageLayout.styles';
-
-type PageLayoutHeaderProps = {
-  children: Array<ReactNode> | ReactNode;
-};
-
-export const PageLayoutHeader = ({
-  children
-}: PageLayoutHeaderProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  return <header className={classes.pageLayoutHeader}>{children}</header>;
-};

package/src/components/Layout/PageLayout/index.ts

@@ -1,10 +0,0 @@
-import { PageLayout as PageLayoutRoot } from './PageLayout';
-import { PageLayoutHeader } from './PageLayoutHeader';
-import { PageLayoutBody } from './PageLayoutBody';
-import { PageLayoutActions } from './PageLayoutActions';
-
-export const PageLayout = Object.assign(PageLayoutRoot, {
-  Actions: PageLayoutActions,
-  Body: PageLayoutBody,
-  Header: PageLayoutHeader
-});

package/src/components/Layout/index.ts

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

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

@@ -1,71 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { useEffect, useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
-
-// import { expect } from '@storybook/jest';
-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

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

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

@@ -1,115 +0,0 @@
-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

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

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

@@ -1,41 +0,0 @@
-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

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

package/src/components/Tooltip/Tooltip.tsx

@@ -1,46 +0,0 @@
-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

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

package/src/utils/useResizeObserver.ts

@@ -1,6 +0,0 @@
-// https://github.com/ZeeCoder/use-resize-observer
-import useResizeObserver from 'use-resize-observer';
-
-export * from 'use-resize-observer';
-
-export { useResizeObserver };