@centreon/ui 24.9.4 → 24.9.6

package/src/components/Modal/ModalHeader.tsx

@@ -1,26 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
-
-import { useStyles } from './Modal.styles';
-
-export type ModalHeaderProps = {
-  children?: ReactNode;
-};
-
-const ModalHeader = ({
-  children,
-  ...rest
-}: ModalHeaderProps & DialogTitleProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.modalHeader}>
-      <MuiDialogTitle color="primary" {...rest}>
-        {children}
-      </MuiDialogTitle>
-    </div>
-  );
-};
-
-export { ModalHeader };

package/src/components/Modal/index.ts

@@ -1,14 +0,0 @@
-import { Modal as ModalRoot } from './Modal';
-import { ModalActions } from './ModalActions';
-import { ModalBody } from './ModalBody';
-import { ModalHeader } from './ModalHeader';
-
-export { ConfirmationModal } from './ConfirmationModal/ConfirmationModal';
-
-export const Modal = Object.assign(ModalRoot, {
-  Actions: ModalActions,
-  Body: ModalBody,
-  Header: ModalHeader
-});
-
-export type { ModalActionsLabels } from './ModalActions';

package/src/components/README.md

@@ -1,3 +0,0 @@
-# ⚠️ not ready for production
-
-The `components/` folder contains **experimental components** that are not ready for production. 

package/src/components/Tabs/Tab.styles.ts

@@ -1,25 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useTabsStyles = makeStyles()((theme) => ({
-  indicator: {
-    bottom: 'unset'
-  },
-  tab: {
-    '&[aria-selected="true"]': {
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightBold
-    },
-    color: theme.palette.text.primary,
-    fontWeight: theme.typography.fontWeightRegular,
-    marginRight: theme.spacing(2),
-    minHeight: 0,
-    minWidth: 0,
-    padding: theme.spacing(0.5, 0)
-  },
-  tabPanel: {
-    padding: theme.spacing(1, 0, 0)
-  },
-  tabs: {
-    minHeight: theme.spacing(4.5)
-  }
-}));

package/src/components/Tabs/TabPanel.tsx

@@ -1,22 +0,0 @@
-import { TabPanel as MuiTabPanel } from '@mui/lab';
-
-import { useTabsStyles } from './Tab.styles';
-
-type Props = {
-  children: JSX.Element;
-  value: string;
-};
-
-export const TabPanel = ({ children, value }: Props): JSX.Element => {
-  const { classes } = useTabsStyles();
-
-  return (
-    <MuiTabPanel
-      className={classes.tabPanel}
-      data-tabPanel={value}
-      value={value}
-    >
-      {children}
-    </MuiTabPanel>
-  );
-};

package/src/components/Tabs/Tabs.cypress.spec.tsx

@@ -1,70 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { TabPanel } from './TabPanel';
-
-import { Tabs } from '.';
-
-const initialize = (withTabListProps = false): void => {
-  cy.mount({
-    Component: (
-      <Tabs
-        defaultTab="tab 0"
-        tabList={
-          withTabListProps
-            ? {
-                variant: 'fullWidth'
-              }
-            : undefined
-        }
-        tabs={[
-          { label: 'Tab 0', value: 'tab 0' },
-          { label: 'Tab 1', value: 'tab 1' }
-        ]}
-      >
-        <TabPanel value="tab 0">
-          <Typography>Tab 0</Typography>
-        </TabPanel>
-        <TabPanel value="tab 1">
-          <Typography>Tab 1</Typography>
-        </TabPanel>
-      </Tabs>
-    )
-  });
-};
-
-describe('Tabs', () => {
-  it('displays tabs and their content when a tab is selected', () => {
-    initialize();
-
-    cy.get('[data-TabPanel="tab 0"]').should('not.have.attr', 'hidden');
-    cy.get('[data-TabPanel="tab 1"]').should('have.attr', 'hidden');
-    cy.findByLabelText('Tab 0')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'true');
-    cy.findByLabelText('Tab 1')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'false');
-
-    cy.contains('Tab 1').click();
-
-    cy.get('[data-TabPanel="tab 0"]').should('have.attr', 'hidden');
-    cy.get('[data-TabPanel="tab 1"]').should('not.have.attr', 'hidden');
-    cy.findByLabelText('Tab 0')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'false');
-    cy.findByLabelText('Tab 1')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'true');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays tabs when tabList props are set', () => {
-    initialize(true);
-
-    cy.get('[data-TabPanel="tab 0"]').should('not.have.attr', 'hidden');
-    cy.get('[data-TabPanel="tab 1"]').should('have.attr', 'hidden');
-
-    cy.makeSnapshot();
-  });
-});

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,55 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Typography } from '@mui/material';
-
-import { TabPanel } from './TabPanel';
-
-import { Tabs } from '.';
-
-const meta: Meta<typeof Tabs> = {
-  component: Tabs
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-const generateTabs = (size: number): Array<{ label: string; value: string }> =>
-  Array(size)
-    .fill(0)
-    .map((_, index) => ({ label: `Tab ${index}`, value: `tab ${index}` }));
-
-export const Default: Story = {
-  args: {
-    defaultTab: 'tab 0',
-    tabs: generateTabs(2)
-  },
-  render: (args) => (
-    <Tabs {...args}>
-      {generateTabs(2).map(({ value, label }) => (
-        <TabPanel key={value} value={value}>
-          <Typography>{label}</Typography>
-        </TabPanel>
-      ))}
-    </Tabs>
-  )
-};
-
-export const WithTabListProps: Story = {
-  args: {
-    defaultTab: 'tab 0',
-    tabList: {
-      textColor: 'inherit',
-      variant: 'fullWidth'
-    },
-    tabs: generateTabs(2)
-  },
-  render: (args) => (
-    <Tabs {...args}>
-      {generateTabs(2).map(({ value, label }) => (
-        <TabPanel key={value} value={value}>
-          <Typography>{label}</Typography>
-        </TabPanel>
-      ))}
-    </Tabs>
-  )
-};

package/src/components/Tabs/Tabs.tsx

@@ -1,55 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { TabContext, TabList, TabListProps } from '@mui/lab';
-import { Tab } from '@mui/material';
-
-import { useTabsStyles } from './Tab.styles';
-
-type Props = {
-  children: Array<JSX.Element>;
-  defaultTab: string;
-  tabList?: TabListProps;
-  tabs: Array<{
-    label: string;
-    value: string;
-  }>;
-};
-
-export const Tabs = ({
-  children,
-  defaultTab,
-  tabs,
-  tabList
-}: Props): JSX.Element => {
-  const { classes } = useTabsStyles();
-
-  const [selectedTab, setSelectedTab] = useState(defaultTab);
-
-  const changeTab = useCallback((_, newValue: string): void => {
-    setSelectedTab(newValue);
-  }, []);
-
-  return (
-    <TabContext value={selectedTab}>
-      <TabList
-        classes={{
-          indicator: classes.indicator,
-          root: classes.tabs
-        }}
-        onChange={changeTab}
-        {...tabList}
-      >
-        {tabs.map(({ value, label }) => (
-          <Tab
-            aria-label={label}
-            className={classes.tab}
-            key={value}
-            label={label}
-            value={value}
-          />
-        ))}
-      </TabList>
-      {children}
-    </TabContext>
-  );
-};

package/src/components/Tabs/index.ts

@@ -1,6 +0,0 @@
-import { TabPanel } from './TabPanel';
-import { Tabs as TabsRoot } from './Tabs';
-
-export const Tabs = Object.assign(TabsRoot, {
-  TabPanel
-});

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

@@ -1,62 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Delete as DeleteIcon, Save as SaveIcon } from '@mui/icons-material';
-
-import { IconButton } from '../..';
-
-import { ConfirmationTooltip } from './ConfirmationTooltip';
-
-const meta: Meta<typeof ConfirmationTooltip> = {
-  component: ConfirmationTooltip
-};
-
-export default meta;
-type Story = StoryObj<typeof ConfirmationTooltip>;
-
-export const Default: Story = {
-  args: {
-    children: ({ toggleTooltip }) => (
-      <IconButton icon={<SaveIcon />} onClick={toggleTooltip} />
-    ),
-    labels: {
-      cancel: 'Cancel',
-      confirm: {
-        label: 'Save'
-      }
-    },
-    onConfirm: () => undefined
-  }
-};
-
-export const WithConfirmVariant: Story = {
-  args: {
-    children: ({ toggleTooltip }) => (
-      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
-    ),
-    confirmVariant: 'error',
-    labels: {
-      cancel: 'Cancel',
-      confirm: {
-        label: 'Delete'
-      }
-    },
-    onConfirm: () => undefined
-  }
-};
-
-export const WithSecondaryLabel: Story = {
-  args: {
-    children: ({ toggleTooltip }) => (
-      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
-    ),
-    confirmVariant: 'error',
-    labels: {
-      cancel: 'Cancel',
-      confirm: {
-        label: 'Delete',
-        secondaryLabel: 'This action will delete the current item'
-      }
-    },
-    onConfirm: () => undefined
-  }
-};

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.styles.tsx

@@ -1,22 +0,0 @@
-import { equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-export const useStyles = makeStyles()((theme) => ({
-  list: {
-    padding: 0
-  },
-  paper: {
-    backgroundColor: equals(theme.palette.mode, ThemeMode.dark)
-      ? theme.palette.background.widget
-      : theme.palette.background.default,
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[3],
-    marginLeft: theme.spacing(2),
-    maxWidth: '350px'
-  },
-  popper: {
-    zIndex: theme.zIndex.tooltip + 1
-  }
-}));

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -1,68 +0,0 @@
-import { MouseEvent, useState } from 'react';
-
-import { Box, ClickAwayListener, Popper } from '@mui/material';
-
-import { useStyles } from './ConfirmationTooltip.styles';
-import TooltipContent from './TooltipContent';
-import { Props } from './models';
-
-export const ConfirmationTooltip = ({
-  children,
-  labels,
-  onConfirm,
-  confirmVariant
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const [anchorElement, setAnchorElement] = useState<
-    HTMLButtonElement | undefined
-  >(undefined);
-
-  const close = (): void => {
-    setAnchorElement(undefined);
-  };
-
-  const open = (event: MouseEvent<HTMLButtonElement>): void => {
-    setAnchorElement(event.currentTarget);
-  };
-
-  const confirm = (): void => {
-    close();
-    onConfirm();
-  };
-
-  const actions = [
-    {
-      action: close,
-      label: labels.cancel
-    },
-    {
-      action: confirm,
-      label: labels.confirm.label,
-      secondaryLabel: labels.confirm.secondaryLabel,
-      variant: confirmVariant
-    }
-  ];
-
-  const isOpen = Boolean(anchorElement);
-
-  return (
-    <ClickAwayListener onClickAway={close}>
-      <div>
-        {children({ isOpen, toggleTooltip: isOpen ? close : open })}
-        <Popper
-          anchorEl={anchorElement}
-          className={classes.popper}
-          open={isOpen}
-          popperOptions={{
-            placement: 'bottom-start'
-          }}
-        >
-          <Box className={classes.paper}>
-            <TooltipContent actions={actions} />
-          </Box>
-        </Popper>
-      </div>
-    </ClickAwayListener>
-  );
-};

package/src/components/Tooltip/ConfirmationTooltip/TooltipContent.tsx

@@ -1,31 +0,0 @@
-import { ActionsList } from '../../..';
-import { ActionVariants } from '../../../ActionsList/models';
-
-import { useStyles } from './ConfirmationTooltip.styles';
-
-interface Props {
-  actions: Array<{
-    action: () => void;
-    label: string;
-    secondaryLabel?: string;
-    variant?: ActionVariants;
-  }>;
-}
-
-const TooltipContent = ({ actions }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <ActionsList
-      actions={actions.map(({ label, action, variant, secondaryLabel }) => ({
-        label,
-        onClick: action,
-        secondaryLabel,
-        variant
-      }))}
-      className={classes.list}
-    />
-  );
-};
-
-export default TooltipContent;

package/src/components/Tooltip/ConfirmationTooltip/index.ts

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

package/src/components/Tooltip/ConfirmationTooltip/models.ts

@@ -1,18 +0,0 @@
-import { ReactElement } from 'react';
-
-import { ActionVariants } from '../../../ActionsList/models';
-
-interface Labels {
-  cancel: string;
-  confirm: {
-    label: string;
-    secondaryLabel?: string;
-  };
-}
-
-export interface Props {
-  children: ({ toggleTooltip, isOpen }) => ReactElement;
-  confirmVariant?: ActionVariants;
-  labels: Labels;
-  onConfirm: () => void;
-}

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

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

@@ -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 { useResizeObserver } from '../../../utils/useResizeObserver';
-import { Tooltip, TooltipProps } from '../Tooltip';
-
-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';