@centreon/ui 24.4.19 → 24.4.21

package/src/ActionsList/ActionsList.styles.ts

@@ -1,116 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-import { equals } from 'ramda';
-
-import { Theme, alpha } from '@mui/material';
-
-interface GetBackgroundAndColorProps {
-  status: string;
-  theme: Theme;
-}
-
-const getColor = ({ theme, status }: GetBackgroundAndColorProps): string =>
-  equals(theme.palette.mode, 'dark')
-    ? theme.palette.common.white
-    : theme.palette[status].main;
-
-export const useStyles = makeStyles()((theme) => ({
-  item: {
-    '& .MuiListItemText-secondary': {
-      textWrap: 'pretty'
-    },
-    '&[data-variant="error"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'error', theme })
-      },
-      '&:hover': {
-        background: alpha(
-          theme.palette.error.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'error', theme })
-      },
-      color: theme.palette.error.main
-    },
-    '&[data-variant="info"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'info', theme })
-      },
-      '&:hover': {
-        background: alpha(
-          theme.palette.info.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'info', theme })
-      },
-      color: theme.palette.info.main
-    },
-    '&[data-variant="pending"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'pending', theme })
-      },
-      '&:hover': {
-        background: alpha(
-          theme.palette.pending.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'pending', theme })
-      },
-      color: theme.palette.pending.main
-    },
-    '&[data-variant="primary"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'primary', theme })
-      },
-      '&:hover': {
-        background: alpha(
-          theme.palette.primary.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'primary', theme })
-      },
-      color: theme.palette.primary.main
-    },
-    '&[data-variant="secondary"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'secondary', theme })
-      },
-      '&:hover': {
-        background: alpha(
-          theme.palette.secondary.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'secondary', theme })
-      },
-      color: theme.palette.secondary.main
-    },
-    '&[data-variant="success"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'success', theme })
-      },
-      '&:hover': {
-        background: alpha(
-          theme.palette.success.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'success', theme })
-      },
-      color: theme.palette.success.main
-    },
-    '&[data-variant="warning"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'warning', theme })
-      },
-      '&:hover': {
-        background: alpha(
-          theme.palette.warning.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'warning', theme })
-      },
-      color: theme.palette.warning.main
-    }
-  },
-  list: {
-    width: '100%'
-  }
-}));

package/src/ActionsList/models.ts

@@ -1,8 +0,0 @@
-export type ActionVariants =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'info'
-  | 'pending';

package/src/Checkbox/Checkbox.tsx

@@ -1,109 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-import { T, always, cond, equals } from 'ramda';
-
-import { SvgIconComponent } from '@mui/icons-material';
-import Typography, { TypographyTypeMap } from '@mui/material/Typography';
-import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
-
-export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
-
-interface StyleProps {
-  hasIcon: boolean;
-  labelPlacement: LabelPlacement;
-}
-
-const getLabelSpacing = (labelPlacement, theme): string => {
-  return cond([
-    [equals('top'), always(theme.spacing(0, 0, 0.5))],
-    [equals('end'), always(theme.spacing(0, 0, 0, 0.5))],
-    [T, always(0)]
-  ])(labelPlacement);
-};
-
-const useStyles = makeStyles<StyleProps>()(
-  (theme, { hasIcon, labelPlacement }) => ({
-    checkbox: {
-      '&.Mui-checked': {
-        color: theme.palette.primary.main
-      },
-      color: theme.palette.primary.main
-    },
-    container: hasIcon
-      ? {
-          alignItems: 'center',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'space-between',
-          minHeight: theme.spacing(11)
-        }
-      : {},
-    icon: {
-      fontSize: theme.spacing(10)
-    },
-    label: {
-      fontSize: theme.typography.body2.fontSize,
-      fontWeight: theme.typography.fontWeightMedium,
-      padding: getLabelSpacing(labelPlacement, theme)
-    }
-  })
-);
-
-interface Props {
-  Icon?: SvgIconComponent;
-  checked: boolean;
-  className?: string;
-  dataTestId?: string;
-  disabled?: boolean;
-  label: string;
-  labelPlacement?: LabelPlacement;
-  labelProps?: TypographyTypeMap['props'];
-  onChange?: (e) => void;
-}
-
-const Checkbox = ({
-  Icon,
-  checked,
-  label,
-  onChange,
-  className,
-  disabled = false,
-  labelPlacement = 'end',
-  dataTestId,
-  labelProps
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({
-    hasIcon: !!Icon,
-    labelPlacement
-  });
-
-  return (
-    <Box className={cx(classes.container, className)}>
-      {Icon && <Icon className={classes.icon} />}
-      <FormControlLabel
-        control={
-          <MuiCheckbox
-            checked={checked}
-            className={classes.checkbox}
-            color="primary"
-            disabled={disabled}
-            id={label}
-            size="small"
-            sx={{ padding: 0 }}
-            onChange={onChange}
-          />
-        }
-        data-testid={dataTestId || ''}
-        key={label}
-        label={
-          <Typography classes={{ root: classes.label }} {...labelProps}>
-            {label}
-          </Typography>
-        }
-        labelPlacement={labelPlacement}
-        sx={{ margin: 0, padding: 0 }}
-      />
-    </Box>
-  );
-};
-
-export default Checkbox;

package/src/Checkbox/CheckboxGroup/index.stories.tsx

@@ -1,41 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import CheckboxGroup from '.';
-
-const options = ['ok', 'warning', 'critical', 'unknown'];
-
-const values = ['ok', 'critical'];
-
-export default {
-  argTypes: {},
-  component: CheckboxGroup,
-  title: 'Checkbox/Multi'
-} as ComponentMeta<typeof CheckboxGroup>;
-
-const Template: ComponentStory<typeof CheckboxGroup> = (args) => (
-  <CheckboxGroup {...args} />
-);
-
-export const Playground = Template.bind({});
-
-Playground.args = {
-  options,
-  values
-};
-
-export const Horizontal = Template.bind({});
-
-Horizontal.args = {
-  direction: 'horizontal',
-  options,
-  values
-};
-
-export const LabelOnTop = Template.bind({});
-
-LabelOnTop.args = {
-  direction: 'horizontal',
-  labelPlacement: 'top',
-  options,
-  values
-};

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -1,75 +0,0 @@
-import { equals, includes } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
-import { TypographyTypeMap } from '@mui/material/Typography';
-
-import Checkbox, { LabelPlacement } from '../Checkbox';
-
-interface Props {
-  className?: string;
-  dataTestId?: string;
-  direction?: 'horizontal' | 'vertical';
-  disabled?: boolean;
-  formGroupProps?: FormGroupProps;
-  labelPlacement?: LabelPlacement;
-  labelProps?: TypographyTypeMap['props'];
-  onChange?: (e) => void;
-  options: Array<string>;
-  values: Array<string>;
-}
-
-const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    display: 'flex',
-    justifyContent: 'center',
-    minWidth: theme.spacing(10)
-  },
-  container: {
-    display: 'flex',
-    gap: 1
-  }
-}));
-
-const CheckboxGroup = ({
-  options,
-  values,
-  direction = 'vertical',
-  onChange,
-  labelPlacement = 'end',
-  disabled = false,
-  dataTestId,
-  className,
-  labelProps,
-  formGroupProps
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
-
-  const row = !equals(direction, 'vertical');
-
-  return (
-    <FormGroup
-      classes={{ root: classes.container }}
-      data-testid={dataTestId || ''}
-      row={row}
-      {...formGroupProps}
-    >
-      {options.map((value) => {
-        return (
-          <Checkbox
-            checked={includes(value, values)}
-            className={cx(classes.checkbox, className)}
-            disabled={disabled}
-            key={value}
-            label={value}
-            labelPlacement={labelPlacement}
-            labelProps={labelProps}
-            onChange={onChange}
-          />
-        );
-      })}
-    </FormGroup>
-  );
-};
-
-export default CheckboxGroup;

package/src/Checkbox/index.stories.tsx

@@ -1,39 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import MailIcon from '@mui/icons-material/MailOutline';
-
-import Checkbox from './Checkbox';
-
-export default {
-  argTypes: {},
-  component: Checkbox,
-  title: 'Checkbox/Single'
-} as ComponentMeta<typeof Checkbox>;
-
-const Template: ComponentStory<typeof Checkbox> = (args) => (
-  <Checkbox {...args} />
-);
-
-export const Playground = Template.bind({});
-
-Playground.args = {
-  checked: true,
-  label: 'Up'
-};
-
-export const WithIcon = Template.bind({});
-
-WithIcon.args = {
-  Icon: MailIcon,
-  checked: true,
-  label: 'Mail',
-  labelPlacement: 'end'
-};
-
-export const LabelOnTop = Template.bind({});
-
-LabelOnTop.args = {
-  checked: true,
-  label: 'Down',
-  labelPlacement: 'top'
-};

package/src/Checkbox/index.tsx

@@ -1,2 +0,0 @@
-export { default as CheckboxGroup } from './CheckboxGroup';
-export { default as Checkbox } from './Checkbox';

package/src/Dashboard/Dashboard.styles.ts

@@ -1,108 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { alpha } from '@mui/material';
-
-export const useDashboardLayoutStyles = makeStyles<boolean>()(
-  (theme, isStatic: boolean) => ({
-    container: {
-      '& .react-grid-item': {
-        borderRadius: theme.shape.borderRadius,
-        transition: theme.transitions.create('all', {
-          delay: 0,
-          duration: 100,
-          easing: theme.transitions.easing.easeOut
-        })
-      },
-      '& .react-grid-item.react-draggable-dragging': {
-        boxShadow: theme.shadows[3]
-      },
-      '& .react-grid-item.react-grid-placeholder': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.7)
-      },
-      '& .react-grid-item.resizing': {
-        boxShadow: theme.shadows[3]
-      },
-      '& .react-resizable-handle': {
-        backgroundColor: theme.palette.action.focus,
-        backgroundImage: 'none',
-        borderRadius: theme.shape.borderRadius,
-        display: isStatic ? 'none' : 'block',
-        opacity: 0,
-        position: 'absolute'
-      },
-      '& .react-resizable-handle.react-resizable-handle-e': {
-        cursor: 'ew-resize',
-        height: `calc(100% - ${theme.spacing(3)})`,
-        marginTop: 0,
-        right: 0,
-        top: 0,
-        transform: 'rotate(0deg)',
-        width: theme.spacing(1)
-      },
-      '& .react-resizable-handle.react-resizable-handle-s': {
-        bottom: 0,
-        cursor: 'ns-resize',
-        height: theme.spacing(1),
-        left: 0,
-        marginLeft: 0,
-        transform: 'rotate(0deg)',
-        width: `calc(100% - ${theme.spacing(3)})`
-      },
-      '& .react-resizable-handle.react-resizable-handle-se': {
-        bottom: 0,
-        cursor: 'nwse-resize',
-        height: theme.spacing(2),
-        right: 0,
-        transform: 'rotate(0deg)',
-        width: theme.spacing(2)
-      },
-      '& .react-resizable-handle::after': {
-        content: 'none'
-      },
-      '& .react-resizable-handle:hover': {
-        opacity: 1
-      }
-    }
-  })
-);
-
-export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
-  (theme, { hasHeader }) => ({
-    widgetContainer: {
-      '&[data-padding="false"]': {
-        padding: 0
-      },
-      background: theme.palette.background.widget,
-      border: 'none',
-      borderRadius: theme.spacing(1),
-      height: '100%',
-      paddingBottom: theme.spacing(2),
-      width: '100%'
-    },
-    widgetContent: {
-      height: '100%'
-    },
-    widgetHeader: {
-      '&:hover': {
-        backgroundColor: theme.palette.action.hover
-      },
-      '&[data-canMove="false"]': {
-        cursor: 'default'
-      },
-      '&[data-canMove="true"]': {
-        cursor: 'move'
-      },
-      padding: theme.spacing(0.5, 2),
-      position: 'relative'
-    },
-    widgetHeaderDraggable: {
-      height: '100%',
-      position: 'absolute',
-      width: '100%'
-    },
-    widgetPadding: {
-      overflowX: 'auto',
-      padding: hasHeader ? theme.spacing(1, 2, 0) : theme.spacing(1, 2)
-    }
-  })
-);

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -1,104 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import { Layout } from 'react-grid-layout';
-
-import { Typography } from '@mui/material';
-
-import FluidTypography from '../Typography/FluidTypography';
-
-import { DashboardLayout } from '.';
-
-interface CustomLayout extends Layout {
-  content: string;
-  shouldUseFluidTypography: boolean;
-}
-
-const dashboardLayout: Array<CustomLayout> = [
-  {
-    content: 'Hello world',
-    h: 4,
-    i: 'a',
-    shouldUseFluidTypography: false,
-    w: 6,
-    x: 0,
-    y: 0
-  },
-  {
-    content: 'This is a panel',
-    h: 3,
-    i: 'b',
-    minW: 2,
-    shouldUseFluidTypography: false,
-    w: 7,
-    x: 1,
-    y: 7
-  },
-  {
-    content: 'And the last panel with fluid typography',
-    h: 7,
-    i: 'c',
-    shouldUseFluidTypography: true,
-    w: 6,
-    x: 6,
-    y: 6
-  }
-];
-
-const generateLayout = (maxElements: number): Array<CustomLayout> => {
-  return Array(maxElements)
-    .fill(0)
-    .map((_, i): CustomLayout => {
-      return {
-        content: `${i}`,
-        h: 3,
-        i: i.toString(),
-        shouldUseFluidTypography: false,
-        w: 3,
-        x: (i * 3) % 12,
-        y: Math.floor(i / 12)
-      };
-    });
-};
-
-interface DashboardTemplateProps {
-  header?: JSX.Element;
-  layout?: Array<CustomLayout>;
-}
-
-const Header = (): JSX.Element => (
-  <Typography variant="body2">The title</Typography>
-);
-
-const DashboardTemplate = ({
-  header,
-  layout = dashboardLayout
-}: DashboardTemplateProps): JSX.Element => (
-  <DashboardLayout.Layout<CustomLayout> layout={layout}>
-    {layout.map(({ i, content, shouldUseFluidTypography }) => (
-      <DashboardLayout.Item header={header} key={i}>
-        {shouldUseFluidTypography ? (
-          <FluidTypography text={content} />
-        ) : (
-          <Typography>{content}</Typography>
-        )}
-      </DashboardLayout.Item>
-    ))}
-  </DashboardLayout.Layout>
-);
-
-export default {
-  argTypes: {},
-  component: DashboardTemplate,
-  title: 'Dashboard'
-} as ComponentMeta<typeof DashboardTemplate>;
-
-export const normal = DashboardTemplate.bind({});
-
-export const withManyPanels = DashboardTemplate.bind({});
-withManyPanels.args = {
-  layout: generateLayout(1000)
-};
-
-export const withItemHeader = DashboardTemplate.bind({});
-withItemHeader.args = {
-  header: <Header />
-};

package/src/Dashboard/Grid.tsx

@@ -1,70 +0,0 @@
-import { useMemo, ReactElement } from 'react';
-
-import { Grid as VisxGrid } from '@visx/visx';
-import { scaleLinear } from '@visx/scale';
-
-import { useTheme } from '@mui/material';
-
-import { useMemoComponent } from '../utils';
-
-import { maxColumns, rowHeight } from './utils';
-
-interface Props {
-  columns: number;
-  height: number;
-  width: number;
-}
-
-const Grid = ({ width, height, columns }: Props): ReactElement => {
-  const theme = useTheme();
-
-  const xScale = useMemo(
-    () =>
-      scaleLinear({
-        domain: [0, maxColumns],
-        range: [0, width]
-      }),
-    [width]
-  );
-
-  const numberOfRows = Math.floor(height / (rowHeight + 16));
-
-  const yScale = useMemo(
-    () =>
-      scaleLinear({
-        domain: [0, numberOfRows],
-        range: [0, height]
-      }),
-    [height]
-  );
-
-  const tick = maxColumns / columns;
-
-  const xTickValues = Array(columns)
-    .fill(0)
-    .map((_, index) => index * tick);
-
-  return useMemoComponent({
-    Component: (
-      <svg style={{ height, position: 'absolute', width }}>
-        <VisxGrid.GridColumns
-          height={height}
-          scale={xScale}
-          stroke={theme.palette.divider}
-          tickValues={xTickValues}
-          width={width}
-        />
-        <VisxGrid.GridRows
-          height={height}
-          scale={yScale}
-          stroke={theme.palette.divider}
-          top={-10}
-          width={width}
-        />
-      </svg>
-    ),
-    memoProps: [height, width, columns]
-  });
-};
-
-export default Grid;