@centreon/ui 24.7.6 → 24.7.7

package/src/Home.mdx

@@ -0,0 +1,41 @@
+{/* Home.mdx */}
+
+import { Meta } from '@storybook/addon-docs'
+import { Typography, Link, Stack } from '@mui/material'
+
+
+<Meta title="Home" />
+
+<Typography variant="h4">Welcome to Centreon UI</Typography>
+<br />
+
+<Typography>This project contains design system's component used in every Centreon projects using ReactJS</Typography>
+<br />
+
+<Typography>Discover older versions of the Centreon UI's storybook</Typography>
+<Stack>
+  <Link href="https://storybook.centreon.com/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>Latest</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/23.04/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>23.04</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/22.10/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>22.10</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/22.04/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>22.04</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/21.10/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>21.10</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/21.04/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>21.04</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/20.10/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>20.10</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/20.04/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>20.04</Typography>
+  </Link>
+</Stack>

package/src/Image/Image.tsx

@@ -22,6 +22,10 @@ interface Props {
 
 const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
   (_, { width, height, variant }) => ({
+    fallbackContainer: {
+      height: '100%',
+      width: '100%'
+    },
     imageContent: {
       height,
       objectFit: variant,
@@ -41,14 +45,20 @@ const ImageContent = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ height, variant, width });
   const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
+
   if (!isImageLoaded) {
-    return fallback;
+    return (
+      <div className={classes.fallbackContainer} data-testid={alt}>
+        {fallback}
+      </div>
+    );
   }
 
   return (
     <img
       alt={alt}
       className={cx(classes.imageContent, className)}
+      data-testid={alt}
       src={imagePath}
     />
   );

package/src/Image/index.stories.tsx

@@ -1,101 +1,101 @@
-import { ComponentStory } from '@storybook/react';
-
-import LoadingSkeleton from '../LoadingSkeleton';
-import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
-import NotAuthorized from '../../assets/not-authorized-template-background-light.svg';
-
-import Image, { ImageVariant } from './Image';
-
-export default {
-  argTypes: {
-    alt: { control: 'text' },
-    height: { control: 'number' },
-    width: { control: 'number' }
-  },
-  component: Image,
-
-  title: 'Image'
-};
-
-const Template: ComponentStory<typeof Image> = (args) => (
-  <Image
-    {...args}
-    fallback={<LoadingSkeleton />}
-    imagePath={CentreonLogoLight}
-  />
-);
-
-const size = 50;
-
-export const basic = Template.bind({});
-basic.args = {
-  alt: 'Centreon logo light'
-};
-
-export const multipleImages = (): JSX.Element => {
-  return (
-    <div
-      style={{
-        columnGap: '16px',
-        display: 'grid',
-        gridTemplateColumns: `repeat(2, ${size}px)`
-      }}
-    >
-      <Image
-        alt="Centreon logo light"
-        fallback={<LoadingSkeleton height={size} width={size} />}
-        height={size}
-        imagePath={CentreonLogoLight}
-        width={size}
-      />
-      <Image
-        alt="Not authorized"
-        fallback={<LoadingSkeleton height={size} width={size} />}
-        height={size}
-        imagePath={NotAuthorized}
-        width={size}
-      />
-      <Image
-        alt="Centreon logo light"
-        fallback={<LoadingSkeleton height={size} width={size} />}
-        height={size}
-        imagePath={CentreonLogoLight}
-        width={size}
-      />
-      <Image
-        alt="Not authorized"
-        fallback={<LoadingSkeleton height={size} width={size} />}
-        height={size}
-        imagePath={NotAuthorized}
-        width={size}
-      />
-    </div>
-  );
-};
-
-export const withWidthAndHeight = Template.bind({});
-withWidthAndHeight.args = {
-  alt: 'Centreon logo light',
-  fallback: <LoadingSkeleton height={size} width={size} />,
-  height: size,
-  imagePath: CentreonLogoLight,
-  width: size
-};
-
-export const imageNotFound = (): JSX.Element => (
-  <Image
-    alt="Not found alt text"
-    fallback={<LoadingSkeleton height={size} width={size} />}
-    height={size}
-    imagePath="not-found"
-    width={size}
-  />
-);
-
-export const variantContain = Template.bind({});
-variantContain.args = {
-  alt: 'Centreon logo light',
-  height: size,
-  variant: ImageVariant.Contain,
-  width: size
-};
+import { ComponentStory } from '@storybook/react';
+
+import LoadingSkeleton from '../LoadingSkeleton';
+import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+import NotAuthorized from '../@assets/images/not-authorized-template-background-light.svg';
+
+import Image, { ImageVariant } from './Image';
+
+export default {
+  argTypes: {
+    alt: { control: 'text' },
+    height: { control: 'number' },
+    width: { control: 'number' }
+  },
+  component: Image,
+
+  title: 'Image'
+};
+
+const Template: ComponentStory<typeof Image> = (args) => (
+  <Image
+    {...args}
+    fallback={<LoadingSkeleton />}
+    imagePath={CentreonLogoLight}
+  />
+);
+
+const size = 50;
+
+export const basic = Template.bind({});
+basic.args = {
+  alt: 'Centreon logo light'
+};
+
+export const multipleImages = (): JSX.Element => {
+  return (
+    <div
+      style={{
+        columnGap: '16px',
+        display: 'grid',
+        gridTemplateColumns: `repeat(2, ${size}px)`
+      }}
+    >
+      <Image
+        alt="Centreon logo light"
+        fallback={<LoadingSkeleton height={size} width={size} />}
+        height={size}
+        imagePath={CentreonLogoLight}
+        width={size}
+      />
+      <Image
+        alt="Not authorized"
+        fallback={<LoadingSkeleton height={size} width={size} />}
+        height={size}
+        imagePath={NotAuthorized}
+        width={size}
+      />
+      <Image
+        alt="Centreon logo light"
+        fallback={<LoadingSkeleton height={size} width={size} />}
+        height={size}
+        imagePath={CentreonLogoLight}
+        width={size}
+      />
+      <Image
+        alt="Not authorized"
+        fallback={<LoadingSkeleton height={size} width={size} />}
+        height={size}
+        imagePath={NotAuthorized}
+        width={size}
+      />
+    </div>
+  );
+};
+
+export const withWidthAndHeight = Template.bind({});
+withWidthAndHeight.args = {
+  alt: 'Centreon logo light',
+  fallback: <LoadingSkeleton height={size} width={size} />,
+  height: size,
+  imagePath: CentreonLogoLight,
+  width: size
+};
+
+export const imageNotFound = (): JSX.Element => (
+  <Image
+    alt="Not found alt text"
+    fallback={<LoadingSkeleton height={size} width={size} />}
+    height={size}
+    imagePath="not-found"
+    width={size}
+  />
+);
+
+export const variantContain = Template.bind({});
+variantContain.args = {
+  alt: 'Centreon logo light',
+  height: size,
+  variant: ImageVariant.Contain,
+  width: size
+};

package/src/Image/index.test.tsx

@@ -1,12 +1,12 @@
 import { RenderResult, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'jotai';
 
-import { render } from '../testRenderer';
-import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
+import { render } from '../../test/testRenderer';
+import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
 
 import Image from './Image';
 
-jest.mock('../../assets/centreon-logo-one-line-light.svg');
+jest.mock('../../@assets/centreon-logo-one-line-light.svg');
 
 const renderImage = (): RenderResult =>
   render(

package/src/InputField/Number/Number.cypress.spec.tsx

@@ -0,0 +1,85 @@
+import NumberField, { NumberProps } from './Number';
+
+const initialize = (props: NumberProps): void => {
+  cy.mount({
+    Component: <NumberField {...props} />
+  });
+};
+
+describe('Number field', () => {
+  it('displays the placeholder when the field has no default or fallback values', () => {
+    initialize({ dataTestId: 'test', onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '0');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the fallback value as placeholder when the field as no default value', () => {
+    initialize({ dataTestId: 'test', fallbackValue: 25, onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '25');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the default value as placeholder when the field as default value', () => {
+    initialize({ dataTestId: 'test', defaultValue: 25, onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the fallback value when the field is cleared out', () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      fallbackValue: 10,
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+    cy.get('input').clear();
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '10');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the field using auto size', () => {
+    initialize({
+      autoSize: true,
+      dataTestId: 'test',
+      defaultValue: 25,
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.get('input').type('0');
+
+    cy.makeSnapshot();
+  });
+
+  it('sets the value to the minimum value configured when a value less than the minimum value is typed in the field', () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      inputProps: {
+        min: 2
+      },
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.get('input').clear().type('-1');
+
+    cy.get('input').should('have.value', '2');
+
+    cy.makeSnapshot();
+  });
+});

package/src/InputField/Number/Number.stories.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable no-console */
+import { Meta, StoryObj } from '@storybook/react';
+
+import NumberField from './Number';
+
+const meta: Meta<typeof NumberField> = {
+  argTypes: {
+    defaultValue: {
+      defaultValue: 0,
+      description:
+        'The initial value which will be used by the input for the first render',
+      type: 'number'
+    },
+    fallbackValue: {
+      defaultValue: 0,
+      description: 'This value will be used when the input is cleared',
+      type: 'number'
+    },
+    onChange: {
+      description:
+        'The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out',
+      type: 'function'
+    }
+  },
+  component: NumberField
+};
+
+export default meta;
+type Story = StoryObj<typeof NumberField>;
+
+export const Default: Story = {
+  args: {
+    onChange: console.log
+  }
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValue: Story = {
+  args: {
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValue: Story = {
+  args: {
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValueAutoSize: Story = {
+  args: {
+    autoSize: true,
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};

package/src/InputField/Number/Number.tsx

@@ -0,0 +1,75 @@
+import { ChangeEvent, useState } from 'react';
+
+import { T, always, clamp, cond, isEmpty } from 'ramda';
+
+import TextField, { TextProps } from '../Text';
+
+export interface NumberProps
+  extends Omit<TextProps, 'defaultValue' | 'onChange'> {
+  /**
+   * The initial value which will be used by the input for the first render
+   */
+  defaultValue?: number;
+  /**
+   *  This value will be used when the input is cleared
+   */
+  fallbackValue?: number;
+  /**
+   * The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out
+   */
+  onChange: (actualValue: number) => void;
+}
+
+const NumberField = ({
+  fallbackValue = 0,
+  defaultValue,
+  onChange,
+  ...props
+}: NumberProps): JSX.Element => {
+  const [placeholder, setPlaceholder] = useState<string | undefined>();
+  const [actualValue, setActualValue] = useState(
+    defaultValue ? `${defaultValue}` : ''
+  );
+
+  const { inputProps } = props;
+
+  const changeValue = (event: ChangeEvent<HTMLInputElement>): void => {
+    const inputValue = event.target.value;
+
+    const number = Number(inputValue);
+    const campledNumber = cond([
+      [() => isEmpty(inputValue), always(fallbackValue)],
+      [() => Number.isNaN(number), always(number)],
+      [
+        T,
+        always(
+          clamp(
+            inputProps?.min || -Infinity,
+            inputProps?.max || Infinity,
+            number
+          )
+        )
+      ]
+    ])();
+
+    onChange(campledNumber);
+    setPlaceholder(isEmpty(inputValue) ? `${fallbackValue}` : undefined);
+    setActualValue(isEmpty(inputValue) ? inputValue : `${campledNumber}`);
+  };
+
+  return (
+    <TextField
+      defaultValue={defaultValue}
+      type="number"
+      value={actualValue}
+      onChange={changeValue}
+      {...props}
+      inputProps={inputProps}
+      placeholder={
+        placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
+      }
+    />
+  );
+};
+
+export default NumberField;

package/src/InputField/Search/PersistentTooltip.tsx

@@ -10,15 +10,15 @@ import IconClose from '@mui/icons-material/HighlightOff';
 const useStyles = makeStyles()((theme) => ({
   buttonClose: {
     position: 'absolute',
-    right: theme.spacing(0.5)
+    right: theme.spacing(-0.5),
+    top: theme.spacing(-1)
   },
   tooltip: {
     backgroundColor: theme.palette.common.white,
     boxShadow: theme.shadows[3],
     color: theme.palette.text.primary,
     fontSize: theme.typography.pxToRem(12),
-    maxWidth: 500,
-    padding: theme.spacing(1, 2, 1, 1)
+    maxWidth: 500
   }
 }));
 
@@ -59,7 +59,7 @@ const PersistentTooltip = ({
   };
 
   const title = (
-    <>
+    <div style={{ position: 'relative' }}>
       <IconButton
         className={classes.buttonClose}
         size="small"
@@ -68,11 +68,15 @@ const PersistentTooltip = ({
         <IconClose fontSize="small" />
       </IconButton>
       {children}
-    </>
+    </div>
   );
 
   return (
-    <Tooltip classes={{ tooltip: classes.tooltip }} open={open} title={title}>
+    <Tooltip
+      classes={{ tooltip: classes.tooltip }}
+      open={openTooltip || open}
+      title={title}
+    >
       <IconButton
         aria-label={labelSearchHelp}
         size="small"

package/src/InputField/Search/index.tsx

@@ -1,8 +1,8 @@
 import IconSearch from '@mui/icons-material/Search';
 
-import TextField, { Props as TextFieldProps } from '../Text';
+import TextField, { TextProps } from '../Text';
 
-type Props = Omit<TextFieldProps, 'StartAdornment'>;
+type Props = Omit<TextProps, 'StartAdornment'>;
 
 const SearchAdornment = (): JSX.Element => <IconSearch />;