@centreon/ui 23.10.35 → 23.10.37

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,40 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  pageLayout: {
-    display: 'grid',
-    gridTemplateRows: 'min-content',
-    overflow: 'hidden'
-  },
-  pageLayoutActions: {
-    '& > span': {
-      display: 'flex',
-      gap: theme.spacing(0.5)
-    },
-
-    display: 'flex',
-    justifyContent: 'space-between',
-    paddingBottom: theme.spacing(2.5)
-  },
-  pageLayoutBody: {
-    '&[data-has-background="true"]': {
-      backgroundColor: theme.palette.layout.body.background
-    },
-    display: 'grid',
-    gridTemplateRows: 'min-content',
-    overflow: 'hidden',
-    padding: theme.spacing(3, 3, 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, 3, 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/Menu/Button/MenuButton.stories.tsx

@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { MenuButton } from './MenuButton';
-
-const meta: Meta<typeof MenuButton> = {
-  component: MenuButton
-};
-
-export default meta;
-type Story = StoryObj<typeof MenuButton>;
-
-export const Default: Story = {
-  args: {
-    'aria-label': 'menu button'
-  }
-};

package/src/components/Menu/Button/MenuButton.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  buttonIcon: {
-    '[data-is-active="true"] &': {
-      transform: 'rotate(180deg)'
-    },
-
-    fontSize: '1.25rem',
-    transition: 'transform 0.15s ease-in-out'
-  },
-  menuButton: {
-    '&:hover:not(&[data-is-active="true"])': {
-      backgroundColor: theme.palette.menu.button.background.hover,
-      color: theme.palette.menu.button.color.hover
-    },
-    '&[data-is-active="true"]': {
-      backgroundColor: theme.palette.menu.button.background.active,
-      color: theme.palette.menu.button.color.active
-    },
-    backgroundColor: theme.palette.menu.button.background.default,
-    color: theme.palette.menu.button.color.default,
-    display: 'flex',
-    height: 'unset',
-    minWidth: 'unset'
-  }
-}));

package/src/components/Menu/Button/MenuButton.tsx

@@ -1,62 +0,0 @@
-import { ReactElement, ReactNode, useCallback } from 'react';
-
-import {
-  ArrowDropDown as ArrowDropDownIcon,
-  Menu as MenuIcon
-} from '@mui/icons-material';
-
-import { Button, ButtonProps } from '../../Button';
-import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
-import { DataTestAttributes } from '../../../@types/data-attributes';
-import { useMenu } from '../useMenu';
-
-import { useStyles } from './MenuButton.styles';
-
-type MenuButtonProps = {
-  children?: ReactNode;
-  hasArrow?: boolean;
-  isOpen?: boolean;
-  onClick?: (args: { isOpen: boolean }) => void;
-} & Pick<ButtonProps, 'disabled' | 'size' | 'variant'> &
-  AriaLabelingAttributes &
-  DataTestAttributes;
-
-const MenuButton = ({
-  children,
-  onClick,
-  hasArrow = true,
-  size = 'small',
-  variant = 'ghost',
-  ...attr
-}: MenuButtonProps): ReactElement => {
-  const { classes } = useStyles();
-
-  const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
-
-  const onToggle = useCallback(
-    (e): void => {
-      setAnchorEl(e.currentTarget);
-
-      setIsMenuOpen(!isMenuOpen);
-      onClick?.({ isOpen: !isMenuOpen });
-      if (!isMenuOpen) onOpen?.();
-    },
-    [isMenuOpen, onClick, onOpen]
-  );
-
-  return (
-    <Button
-      {...attr}
-      className={classes.menuButton}
-      data-is-active={isMenuOpen}
-      size={size}
-      variant={variant}
-      onClick={onToggle}
-    >
-      {children || <MenuIcon />}
-      {hasArrow && <ArrowDropDownIcon className={classes.buttonIcon} />}
-    </Button>
-  );
-};
-
-export { MenuButton };

package/src/components/Menu/Button/index.ts

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

package/src/components/Menu/Menu.stories.tsx

@@ -1,71 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Add as AddIcon } from '@mui/icons-material';
-
-import { Button } from '../Button';
-
-import { Menu } from '.';
-
-const meta: Meta<typeof Menu> = {
-  component: Menu
-};
-
-export default meta;
-type Story = StoryObj<typeof Menu>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <Menu.Items>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item isActive isDisabled>
-          Menu Item
-        </Menu.Item>
-        <Menu.Item isDisabled>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Divider />
-        <Menu.Item>Add item...</Menu.Item>
-      </Menu.Items>
-    ),
-    isOpen: true
-  }
-};
-
-export const WithMenuButton: Story = {
-  args: {
-    children: (
-      <>
-        <Menu.Button />
-        {Default.args?.children}
-      </>
-    )
-  }
-};
-
-export const WithCustomActionButton: Story = {
-  args: {
-    children: (
-      <Menu.Items>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item isActive isDisabled>
-          Menu Item
-        </Menu.Item>
-        <Menu.Item isDisabled>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>
-    ),
-    isOpen: true
-  }
-};

package/src/components/Menu/Menu.styles.ts

@@ -1,70 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  menuDivider: {
-    '&, &.MuiDivider-root': {
-      borderColor: theme.palette.menu.divider.border
-    }
-  },
-  menuItem: {
-    '&, &.MuiMenuItem-root': {
-      '& > button': {
-        '&:hover:not(&[data-is-active="true"])': {
-          backgroundColor: theme.palette.menu.item.background.hover,
-          color: theme.palette.menu.item.color.hover
-        },
-        backgroundColor: theme.palette.menu.item.background.default,
-        color: theme.palette.menu.item.color.default,
-        fontSize: '1rem',
-        justifyContent: 'flex-start',
-        width: '100%'
-      },
-
-      '&:has(button)': {
-        '& > .MuiTouchRipple-root': {
-          display: 'none'
-        },
-        '&:hover:not(&[data-is-active="true"])': {
-          backgroundColor: 'unset'
-        },
-        padding: theme.spacing(0, 2)
-      },
-
-      '&:not(:has(button))': {
-        '&:hover:not(&[data-is-active="true"])': {
-          backgroundColor: theme.palette.menu.item.background.hover,
-          color: theme.palette.menu.item.color.hover
-        },
-        '&[data-is-active="true"], &.Mui-selected': {
-          '&[data-is-disabled="true"], &.Mui-disabled': {
-            opacity: 1
-          },
-          backgroundColor: theme.palette.menu.item.background.active,
-          color: theme.palette.menu.item.color.active,
-          opacity: 1
-        },
-        '&[data-is-disabled="true"], &.Mui-disabled': {
-          opacity: 0.5
-        },
-        backgroundColor: theme.palette.menu.item.background.default,
-        color: theme.palette.menu.item.color.default,
-        padding: theme.spacing(0.75, 2)
-      },
-
-      fontSize: '1rem',
-      minHeight: 'unset'
-    }
-  },
-  menuItems: {
-    '& > .MuiPaper-root.MuiMenu-paper': {
-      backgroundColor: theme.palette.menu.background,
-      borderRadius: '4px',
-      boxShadow: theme.shadows[8],
-      minWidth: '240px',
-      transform: `translateY(${theme.spacing(0.5)}) !important`
-    },
-    '& ul, & ul.MuiMenu-list': {
-      padding: theme.spacing(1, 0)
-    }
-  }
-}));

package/src/components/Menu/Menu.tsx

@@ -1,25 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { MenuProvider } from './useMenu';
-
-type MenuProps = {
-  children?: ReactNode | Array<ReactNode>;
-  isOpen?: boolean;
-  onClose?: () => void;
-  onOpen?: () => void;
-};
-
-const Menu = ({
-  children,
-  isOpen = false,
-  onOpen,
-  onClose
-}: MenuProps): ReactElement => {
-  return (
-    <MenuProvider initialIsOpen={isOpen} onClose={onClose} onOpen={onOpen}>
-      {children}
-    </MenuProvider>
-  );
-};
-
-export { Menu };

package/src/components/Menu/MenuDivider.tsx

@@ -1,13 +0,0 @@
-import { ReactElement } from 'react';
-
-import { Divider as MuiDivider } from '@mui/material';
-
-import { useStyles } from './Menu.styles';
-
-const MenuDivider = (): ReactElement => {
-  const { classes } = useStyles();
-
-  return <MuiDivider className={classes.menuDivider} />;
-};
-
-export { MenuDivider };

package/src/components/Menu/MenuItem.tsx

@@ -1,36 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { MenuItem as MuiMenuItem } from '@mui/material';
-
-import { useStyles } from './Menu.styles';
-
-type MenuItemProps = {
-  children?: ReactNode;
-  isActive?: boolean;
-  isDisabled?: boolean;
-  onClick?: () => void;
-};
-
-const MenuItem = ({
-  children,
-  onClick,
-  isActive = false,
-  isDisabled = false
-}: MenuItemProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <MuiMenuItem
-      className={classes.menuItem}
-      data-is-active={isActive}
-      data-is-disabled={isDisabled}
-      disabled={isDisabled}
-      selected={isActive}
-      onClick={() => onClick?.()}
-    >
-      {children}
-    </MuiMenuItem>
-  );
-};
-
-export { MenuItem };

package/src/components/Menu/MenuItems.tsx

@@ -1,35 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { Menu as MuiMenu } from '@mui/material';
-
-import { useStyles } from './Menu.styles';
-import { useMenu } from './useMenu';
-
-type MenuItemsProps = {
-  children?: ReactNode | Array<ReactNode>;
-};
-const MenuItems = ({ children }: MenuItemsProps): ReactElement => {
-  const { classes } = useStyles();
-
-  const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
-
-  const onCloseMenu = (): void => {
-    setIsMenuOpen(false);
-    onClose?.();
-  };
-
-  return (
-    <MuiMenu
-      anchorEl={anchorEl}
-      className={classes.menuItems}
-      open={isMenuOpen}
-      variant="menu"
-      onClick={onCloseMenu}
-      onClose={onCloseMenu}
-    >
-      {children}
-    </MuiMenu>
-  );
-};
-
-export { MenuItems };

package/src/components/Menu/index.ts

@@ -1,12 +0,0 @@
-import { Menu as MenuRoot } from './Menu';
-import { MenuButton } from './Button';
-import { MenuItem } from './MenuItem';
-import { MenuDivider } from './MenuDivider';
-import { MenuItems } from './MenuItems';
-
-export const Menu = Object.assign(MenuRoot, {
-  Button: MenuButton,
-  Divider: MenuDivider,
-  Item: MenuItem,
-  Items: MenuItems
-});

package/src/components/Menu/useMenu.tsx

@@ -1,79 +0,0 @@
-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 };