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

package/src/components/Header/Header.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  header: {
-    alignItems: 'flex-start',
-    borderBottom: `1px solid ${theme.palette.primary.main}`,
-    display: 'flex',
-    flexDirection: 'row',
-    h1: {
-      font: 'normal normal 600 24px/24px Roboto',
-      letterSpacing: '0.18px',
-      margin: theme.spacing(0, 0, 1.5, 0)
-    },
-    justifyContent: 'space-between',
-    marginBottom: theme.spacing(2.5),
-
-    nav: {
-      display: 'flex',
-      gap: theme.spacing(1),
-      justifyContent: 'flex-end'
-    },
-
-    padding: theme.spacing(0, 0, 1.5, 0)
-  }
-}));
-
-export { useStyles };

package/src/components/Header/PageHeader/PageHeader.stories.tsx

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  ArrowDropDown as ArrowDropDownIcon,
+  Menu as MenuIcon,
+  Settings as SettingsIcon,
+  StarOutline as StarOutlineIcon
+} from '@mui/icons-material';
+
+import { Button, IconButton } from '../../Button';
+
+import { PageHeader } from './index';
+
+type PageHeaderComponent = typeof PageHeader & typeof PageHeader.Title;
+
+const meta: Meta<typeof PageHeader> = {
+  component: PageHeader
+};
+
+export default meta;
+type Story = StoryObj<PageHeaderComponent>;
+
+export const Default: Story = {
+  args: {
+    title: 'Page header'
+  },
+  render: (args) => (
+    <PageHeader>
+      <PageHeader.Main>
+        <PageHeader.Title {...args} />
+      </PageHeader.Main>
+      <PageHeader.Actions>
+        <Button
+          icon={<SettingsIcon />}
+          iconVariant="start"
+          size="small"
+          variant="ghost"
+        >
+          Manage
+        </Button>
+      </PageHeader.Actions>
+    </PageHeader>
+  )
+};
+
+export const WithDescription: Story = {
+  args: {
+    description:
+      'Eu aliquip quis in minim laboris occaecat quis nostrud occaecat. Cupidatat consectetur non Lorem eiusmod ut cupidatat dolor enim cillum ex enim irure velit. ',
+    title: 'Nulla ex dolore tempor magna ex'
+  },
+  render: Default.render
+};
+
+export const WithMenu: Story = {
+  args: {
+    ...WithDescription.args,
+    actions: (
+      <IconButton icon={<StarOutlineIcon />} size="small" variant="ghost" />
+    )
+  },
+  render: (args) => (
+    <PageHeader>
+      <PageHeader.Main>
+        <PageHeader.Menu>
+          <MenuIcon />
+          <ArrowDropDownIcon data-size="small" />
+        </PageHeader.Menu>
+        <PageHeader.Title {...args} />
+      </PageHeader.Main>
+      <PageHeader.Actions>
+        <Button
+          icon={<SettingsIcon />}
+          iconVariant="start"
+          size="small"
+          variant="ghost"
+        >
+          Manage
+        </Button>
+      </PageHeader.Actions>
+    </PageHeader>
+  )
+};

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

@@ -0,0 +1,105 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  header: {
+    alignItems: 'flex-start',
+    borderBottom: `1px solid ${theme.palette.primary.main}`,
+    display: 'flex',
+    flexDirection: 'row',
+    h1: {
+      font: 'normal normal 600 24px/24px Roboto',
+      letterSpacing: '0.18px',
+      margin: theme.spacing(0, 0, 1.5, 0)
+    },
+    justifyContent: 'space-between',
+
+    nav: {
+      display: 'flex',
+      gap: theme.spacing(1),
+      justifyContent: 'flex-end'
+    },
+
+    padding: theme.spacing(0, 0, 1.5, 0)
+  },
+  pageHeader: {
+    alignItems: 'flex-start',
+    borderBottom: `1px solid ${theme.palette.header.page.border}`,
+    display: 'flex',
+    gap: theme.spacing(4),
+    paddingBottom: theme.spacing(2)
+  },
+  pageHeaderActions: {
+    '& > button': {
+      '&:hover': {
+        backgroundColor: theme.palette.header.page.action.background.active,
+        color: theme.palette.header.page.action.color.active
+      },
+      backgroundColor: theme.palette.header.page.action.background.default,
+
+      color: theme.palette.header.page.action.color.default
+    },
+    display: 'flex',
+
+    gap: theme.spacing(2)
+  },
+  pageHeaderMain: {
+    display: 'flex',
+    flexGrow: 1,
+    gap: theme.spacing(1.5)
+  },
+  pageHeaderMenu: {
+    // TEMP
+    '& [data-size="small"]': {
+      height: '20px',
+      marginTop: theme.spacing(0.25),
+      width: '20px'
+    },
+    alignItems: 'top',
+    display: 'flex',
+    opacity: 0.5,
+    padding: theme.spacing(0.25, 0)
+  },
+  pageHeaderTitle: {
+    '& > *': {
+      display: 'grid'
+    },
+    '& > span': {
+      display: 'flex',
+      flexDirection: 'row',
+
+      gap: theme.spacing(2)
+    },
+    display: 'flex',
+
+    flexDirection: 'column',
+
+    gap: theme.spacing(1),
+
+    h1: {
+      color: theme.palette.header.page.title,
+      font: 'normal normal 700 24px/100% Roboto',
+      letterSpacing: '0.15px',
+      margin: theme.spacing(0)
+    }
+  },
+  pageHeaderTitleActions: {
+    '& > button': {
+      opacity: 0.2,
+      padding: 0
+    },
+    alignItems: 'bottom',
+    display: 'flex',
+    gap: theme.spacing(1)
+  },
+  pageHeaderTitleDescription: {
+    color: theme.palette.header.page.description,
+    font: 'normal normal 400 12px/16px Roboto',
+    letterSpacing: '0.15px',
+    maxWidth: '560px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}));
+
+export { useStyles };

package/src/components/Header/PageHeader/PageHeader.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderProps = {
+  children?: ReactNode;
+};
+
+const PageHeader = ({ children }: PageHeaderProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <section className={classes.pageHeader}>{children}</section>;
+};
+
+export { PageHeader };

package/src/components/Header/PageHeader/PageHeaderActions.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderActionsProps = {
+  children?: ReactNode;
+};
+
+const PageHeaderActions = ({
+  children
+}: PageHeaderActionsProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <header className={classes.pageHeaderActions}>{children}</header>;
+};
+
+export { PageHeaderActions };

package/src/components/Header/PageHeader/PageHeaderMain.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderMainProps = {
+  children?: ReactNode;
+};
+
+const PageHeaderMain = ({ children }: PageHeaderMainProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <div className={classes.pageHeaderMain}>{children}</div>;
+};
+
+export { PageHeaderMain };

package/src/components/Header/PageHeader/PageHeaderMenu.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderMenuProps = {
+  children?: ReactNode;
+};
+
+const PageHeaderMenu = ({ children }: PageHeaderMenuProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <nav className={classes.pageHeaderMenu}>{children}</nav>;
+};
+
+export { PageHeaderMenu };

package/src/components/Header/PageHeader/PageHeaderTitle.tsx

@@ -0,0 +1,44 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { Typography as MuiTypography } from '@mui/material';
+
+import { TextOverflowTooltip } from '../../Tooltip/TextOverflowTooltip';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderTitleProps = {
+  actions?: ReactNode;
+  description?: string;
+  title: string;
+};
+
+const PageHeaderTitle = ({
+  actions,
+  title,
+  description
+}: PageHeaderTitleProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.pageHeaderTitle}>
+      <span>
+        <MuiTypography variant="h1">{title}</MuiTypography>
+        {actions && (
+          <div className={classes.pageHeaderTitleActions}>{actions}</div>
+        )}
+      </span>
+      {description && (
+        <TextOverflowTooltip label={description}>
+          <MuiTypography
+            className={classes.pageHeaderTitleDescription}
+            variant="body2"
+          >
+            {description}
+          </MuiTypography>
+        </TextOverflowTooltip>
+      )}
+    </div>
+  );
+};
+
+export { PageHeaderTitle };

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

@@ -0,0 +1,12 @@
+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/Header/index.ts

@@ -1 +1 @@
-export * from './Header';
+export * from './PageHeader';

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

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

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

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

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

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

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

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

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

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

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