@centreon/ui 24.5.12 → 24.5.13

package/src/Button/Save/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Theme } from '@mui/material';
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-export default {
+const meta = {
   argTypes: {
     labelLoading: { control: 'text' },
     labelSave: { control: 'text' },
@@ -26,8 +26,13 @@ export default {
 
   component: ButtonSave,
 
+  parameters: {
+    chromatic: { delay: 300 }
+  },
   title: 'Button/Save'
-} as ComponentMeta<typeof ButtonSave>;
+};
+
+export default meta;
 
 const TemplateButtonSave: ComponentStory<typeof ButtonSave> = (args) => (
   <ButtonSave {...args} />
@@ -42,7 +47,7 @@ export const loading = (): JSX.Element => <ButtonSave loading />;
 export const succeeded = (): JSX.Element => <ButtonSave succeeded />;
 
 export const normalWithText = (): JSX.Element => (
-  <ButtonSave labelSave="Save" />
+  <ButtonSave labelSave="Save" size="medium" />
 );
 
 export const largeWithText = (): JSX.Element => (
@@ -50,7 +55,7 @@ export const largeWithText = (): JSX.Element => (
 );
 
 export const loadingWithTextAndMediumSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" />
+  <ButtonSave loading labelLoading="Loading" size="medium" />
 );
 
 export const succeededWithText = (): JSX.Element => (

package/src/Button/Save/index.tsx

@@ -1,13 +1,13 @@
 import { any, isEmpty, isNil, not, or, pipe } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
+import { LoadingButton, LoadingButtonProps } from '@mui/lab';
 import { Theme, Tooltip } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
-import StartIcon from './StartIcon';
 import Content from './Content';
+import StartIcon from './StartIcon';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   loadingButton: {
@@ -15,13 +15,14 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-interface Props extends Record<string, unknown> {
+interface Props {
   className?: string;
   labelLoading?: string;
   labelSave?: string;
   labelSucceeded?: string;
   loading?: boolean;
   size?: 'small' | 'medium' | 'large';
+  startIcon?: boolean;
   succeeded?: boolean;
   tooltip?: string;
   tooltipLabel?: string;
@@ -45,8 +46,9 @@ const SaveButton = ({
   labelSave = '',
   size = 'small',
   className,
+  startIcon = true,
   ...rest
-}: Props): JSX.Element => {
+}: Props & LoadingButtonProps): JSX.Element => {
   const { classes, cx } = useStyles();
   const hasLabel = hasValue([labelLoading, labelSave, labelSucceeded]);
 
@@ -73,7 +75,9 @@ const SaveButton = ({
           loading={loading}
           loadingPosition={labelLoading ? 'start' : 'center'}
           size={size}
-          startIcon={<StartIcon startIconConfig={startIconConfig} />}
+          startIcon={
+            startIcon && <StartIcon startIconConfig={startIconConfig} />
+          }
           variant="contained"
           {...rest}
         >

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,109 @@
+import { makeStyles } from 'tss-react/mui';
+import { T, always, cond, equals } from 'ramda';
+
+import { SvgIconComponent } from '@mui/icons-material';
+import Typography, { TypographyProps } 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?: TypographyProps;
+  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

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

@@ -0,0 +1,75 @@
+import { equals, includes } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
+import { TypographyProps } 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?: TypographyProps;
+  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

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

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

package/src/Dashboard/Dashboard.cypress.spec.tsx

@@ -0,0 +1,68 @@
+import { Typography } from '@mui/material';
+
+import { DashboardLayout } from '.';
+
+const dashboardLayout: Array<CustomLayout> = [
+  {
+    content: 'Panel 1',
+    h: 4,
+    i: 'a',
+    shouldUseFluidTypography: false,
+    w: 6,
+    x: 0,
+    y: 0
+  },
+  {
+    content: 'Panel 2',
+    h: 3,
+    i: 'b',
+    minW: 2,
+    w: 7,
+    x: 1,
+    y: 7
+  },
+  {
+    content: 'Panel 3',
+    h: 7,
+    i: 'c',
+    w: 6,
+    x: 6,
+    y: 6
+  },
+  {
+    content: 'Panel 4',
+    h: 3,
+    i: 'd',
+    minW: 2,
+    w: 5,
+    x: 4,
+    y: 10
+  }
+];
+
+const initialize = (): void => {
+  cy.mount({
+    Component: (
+      <DashboardLayout.Layout layout={dashboardLayout}>
+        {dashboardLayout.map(({ i, content }) => (
+          <DashboardLayout.Item header={<div>header</div>} id={i} key={i}>
+            <Typography>{content}</Typography>
+          </DashboardLayout.Item>
+        ))}
+      </DashboardLayout.Layout>
+    )
+  });
+};
+
+describe('Dashboard', () => {
+  it('displays placeholder when panels is out of viewport', () => {
+    initialize();
+
+    cy.get('[data-widget-skeleton="a"]').should('not.exist');
+    cy.get('[data-widget-skeleton="b"]').should('not.exist');
+    cy.get('[data-widget-skeleton="c"]').should('not.exist');
+    cy.get('[data-widget-skeleton="d"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Dashboard/Dashboard.styles.ts

@@ -0,0 +1,110 @@
+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.2)
+      },
+      '& .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
+      },
+      position: 'relative'
+    }
+  })
+);
+
+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%',
+      width: '100%'
+    },
+    widgetContent: {
+      height: hasHeader
+        ? `calc(100% - ${theme.spacing(3.5)} - ${theme.spacing(0.5)})`
+        : `calc(100% - ${theme.spacing(3.5)})`
+    },
+    widgetHeader: {
+      '&:hover': {
+        backgroundColor: theme.palette.action.hover
+      },
+      '&[data-canMove="false"]': {
+        cursor: 'default'
+      },
+      '&[data-canMove="true"]': {
+        cursor: 'move'
+      },
+      padding: theme.spacing(0, 1.5),
+      position: 'relative'
+    },
+    widgetHeaderDraggable: {
+      height: '100%',
+      position: 'absolute',
+      width: '95%'
+    },
+    widgetPadding: {
+      overflowX: 'auto',
+      padding: theme.spacing(0.5, 1.5, 1.5)
+    }
+  })
+);

package/src/Dashboard/DashboardLayout.stories.tsx

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