@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

package/src/base/tokens/themes/ui-light.tokens.ts

@@ -1,38 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Sun, 04 Jun 2023 10:14:22 GMT
- */
-
-export const colorBlue50 = '#ecf4fdff';
-export const colorBlue100 = '#d2e4f9ff';
-export const colorBlue200 = '#9ec4f0ff';
-export const colorBlue300 = '#6da4e4ff';
-export const colorBlue400 = '#3e85d5ff';
-export const colorBlue500 = '#2e68aaff';
-export const colorBlue600 = '#205593ff';
-export const colorBlue700 = '#164274ff';
-export const colorBlue800 = '#0d2e54ff';
-export const colorBlue900 = '#071d37ff';
-export const colorBlue950 = '#031326ff';
-export const colorPurple50 = '#f8f1f9ff';
-export const colorPurple100 = '#f0def2ff';
-export const colorPurple200 = '#ddafe4ff';
-export const colorPurple300 = '#ce81daff';
-export const colorPurple400 = '#c151d2ff';
-export const colorPurple500 = '#ac28c1ff';
-export const colorPurple600 = '#872796ff';
-export const colorPurple700 = '#682172ff';
-export const colorPurple800 = '#491b50ff';
-export const colorPurple900 = '#29112cff';
-export const colorPurple950 = '#1a0d1cff';
-export const colorGrey50 = '#f9fafbff';
-export const colorGrey100 = '#eaedf0ff';
-export const colorGrey200 = '#cad0d8ff';
-export const colorGrey300 = '#aab4c0ff';
-export const colorGrey400 = '#8c98a6ff';
-export const colorGrey500 = '#6f7b8aff';
-export const colorGrey600 = '#596573ff';
-export const colorGrey700 = '#434e5bff';
-export const colorGrey800 = '#2f3741ff';
-export const colorGrey900 = '#1b2127ff';
-export const colorGrey950 = '#101418ff';

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

@@ -1,88 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import {
-  Settings as SettingsIcon,
-  StarOutline as StarOutlineIcon
-} from '@mui/icons-material';
-
-import { Button, IconButton } from '../../Button';
-import { Menu } from '../../Menu';
-
-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>
-          <Menu>
-            <Menu.Button />
-            <Menu.Items>
-              <Menu.Item>Menu Item</Menu.Item>
-              <Menu.Item>Menu Item</Menu.Item>
-              <Menu.Item>Menu Item</Menu.Item>
-            </Menu.Items>
-          </Menu>
-        </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

@@ -1,99 +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',
-
-    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)
-  },
-  pageHeaderMenu: {
-    alignItems: 'flex-start',
-    display: 'flex',
-    position: 'relative',
-    transform: `translateY(-${theme.spacing(0.25)})`
-  },
-  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

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

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

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

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

@@ -1,47 +0,0 @@
-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 aria-label="page header title" variant="h1">
-          {title}
-        </MuiTypography>
-        {actions && (
-          <div className={classes.pageHeaderTitleActions}>{actions}</div>
-        )}
-      </span>
-      {description && (
-        <TextOverflowTooltip label={description}>
-          <MuiTypography
-            aria-label="page header description"
-            className={classes.pageHeaderTitleDescription}
-            variant="body2"
-          >
-            {description}
-          </MuiTypography>
-        </TextOverflowTooltip>
-      )}
-    </div>
-  );
-};
-
-export { PageHeaderTitle };

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,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'
-  }
-}));