@centreon/ui 24.11.14 → 24.11.21

package/src/Image/Image.tsx

@@ -1,65 +1,75 @@
-import { memo } from 'react';
-
-import { makeStyles } from 'tss-react/mui';
-import { equals, isNil } from 'ramda';
-
-import { useLoadImage } from './useLoadImage';
-
-export enum ImageVariant {
-  Contain = 'contain',
-  Cover = 'cover'
-}
-
-interface Props {
-  alt: string;
-  className?: string;
-  fallback: JSX.Element;
-  height?: number | string;
-  imagePath: string;
-  variant?: ImageVariant;
-  width?: number | string;
-}
-
-const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
-  (_, { width, height, variant }) => ({
-    imageContent: {
-      height,
-      objectFit: variant,
-      width
-    }
-  })
-);
-
-const ImageContent = ({
-  alt,
-  className,
-  height,
-  width,
-  imagePath,
-  variant = ImageVariant.Cover,
-  fallback
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ height, variant, width });
-  const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
-  if (!isImageLoaded) {
-    return fallback;
-  }
-
-  return (
-    <img
-      alt={alt}
-      className={cx(classes.imageContent, className)}
-      src={imagePath}
-    />
-  );
-};
-
-const SuspendedImage = ({ imagePath, ...props }: Props): JSX.Element | null => {
-  if (isNil(imagePath)) {
-    return null;
-  }
-
-  return <ImageContent {...props} imagePath={imagePath} />;
-};
-
-export default memo(SuspendedImage, equals);
+import { memo } from 'react';
+
+import { equals, isNil } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { useLoadImage } from './useLoadImage';
+
+export enum ImageVariant {
+  Contain = 'contain',
+  Cover = 'cover'
+}
+
+interface Props {
+  alt: string;
+  className?: string;
+  fallback: JSX.Element;
+  height?: number | string;
+  imagePath: string;
+  variant?: ImageVariant;
+  width?: number | string;
+}
+
+const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
+  (_, { width, height, variant }) => ({
+    fallbackContainer: {
+      height: '100%',
+      width: '100%'
+    },
+    imageContent: {
+      height,
+      objectFit: variant,
+      width
+    }
+  })
+);
+
+const ImageContent = ({
+  alt,
+  className,
+  height,
+  width,
+  imagePath,
+  variant = ImageVariant.Cover,
+  fallback
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ height, variant, width });
+  const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
+
+  if (!isImageLoaded) {
+    return (
+      <div className={classes.fallbackContainer} data-testid={alt}>
+        {fallback}
+      </div>
+    );
+  }
+
+  return (
+    <img
+      alt={alt}
+      className={cx(classes.imageContent, className)}
+      data-testid={alt}
+      src={imagePath}
+    />
+  );
+};
+
+const SuspendedImage = ({ imagePath, ...props }: Props): JSX.Element | null => {
+  if (isNil(imagePath)) {
+    return null;
+  }
+
+  return <ImageContent {...props} imagePath={imagePath} />;
+};
+
+export default memo(SuspendedImage, equals);

package/src/Image/atoms.ts

@@ -1,3 +1,3 @@
-import { atom } from 'jotai';
-
-export const imagesAtom = atom<Record<string, string>>({});
+import { atom } from 'jotai';
+
+export const imagesAtom = atom<Record<string, string>>({});

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 CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+import NotAuthorized from '../@assets/images/not-authorized-template-background-light.svg';
+import LoadingSkeleton from '../LoadingSkeleton';
+
+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,53 +1,53 @@
-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 Image from './Image';
-
-jest.mock('../../assets/centreon-logo-one-line-light.svg');
-
-const renderImage = (): RenderResult =>
-  render(
-    <Provider>
-      <Image
-        alt="test"
-        fallback={<p>Loading...</p>}
-        imagePath={CentreonLogoLight}
-      />
-    </Provider>
-  );
-
-const renderNotFoundImage = (): RenderResult =>
-  render(
-    <Provider>
-      <Image
-        alt="test"
-        fallback={<p>Loading...</p>}
-        imagePath="another_image"
-      />
-    </Provider>
-  );
-
-describe('useLoadImage', () => {
-  it('displays the loaded image', async () => {
-    renderImage();
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.getByAltText('test')).toBeInTheDocument();
-    });
-  });
-
-  it('displays a not found image', async () => {
-    renderNotFoundImage();
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.getByAltText('test')).toBeInTheDocument();
-    });
-  });
-});
+import { RenderResult, screen, waitFor } from '@testing-library/react';
+import { Provider } from 'jotai';
+
+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');
+
+const renderImage = (): RenderResult =>
+  render(
+    <Provider>
+      <Image
+        alt="test"
+        fallback={<p>Loading...</p>}
+        imagePath={CentreonLogoLight}
+      />
+    </Provider>
+  );
+
+const renderNotFoundImage = (): RenderResult =>
+  render(
+    <Provider>
+      <Image
+        alt="test"
+        fallback={<p>Loading...</p>}
+        imagePath="another_image"
+      />
+    </Provider>
+  );
+
+describe('useLoadImage', () => {
+  it('displays the loaded image', async () => {
+    renderImage();
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByAltText('test')).toBeInTheDocument();
+    });
+  });
+
+  it('displays a not found image', async () => {
+    renderNotFoundImage();
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByAltText('test')).toBeInTheDocument();
+    });
+  });
+});

package/src/Image/models.ts

@@ -1,3 +1,3 @@
-export interface Image {
-  read: () => string;
-}
+export interface Image {
+  read: () => string;
+}

package/src/Image/useLoadImage.ts

@@ -1,49 +1,49 @@
-import { SetStateAction, useAtom } from 'jotai';
-import { isEmpty, isNil, prop } from 'ramda';
-
-import { imagesAtom } from './atoms';
-
-interface CreateImageProps {
-  alt: string;
-  image?: string;
-  imageSrc: string;
-  setImages: (update: SetStateAction<Record<string, string>>) => void;
-}
-
-const createImage = ({
-  setImages,
-  imageSrc,
-  image,
-  alt
-}: CreateImageProps): void => {
-  const imageLoaderPromise = (): Promise<string> =>
-    new Promise<string>((resolve, reject) => {
-      const img = new Image();
-      img.src = imageSrc;
-      img.onload = (): void => resolve(imageSrc);
-      img.onerror = (): void =>
-        reject(new Error(`Failed to load image ${imageSrc}`));
-    });
-
-  if (!isNil(image) || isEmpty(image)) {
-    return;
-  }
-
-  imageLoaderPromise()
-    .then((result: string): void => {
-      setImages((currentImages) => ({ ...currentImages, [alt]: result }));
-    })
-    .catch(() => {
-      setImages((currentImages) => ({ ...currentImages, [alt]: '' }));
-    });
-};
-
-export const useLoadImage = ({ imageSrc, alt }): boolean => {
-  const [images, setImages] = useAtom(imagesAtom);
-
-  const image = prop(alt, images);
-
-  createImage({ alt, image, imageSrc, setImages });
-
-  return !isNil(image) || isEmpty(image);
-};
+import { SetStateAction, useAtom } from 'jotai';
+import { isEmpty, isNil, prop } from 'ramda';
+
+import { imagesAtom } from './atoms';
+
+interface CreateImageProps {
+  alt: string;
+  image?: string;
+  imageSrc: string;
+  setImages: (update: SetStateAction<Record<string, string>>) => void;
+}
+
+const createImage = ({
+  setImages,
+  imageSrc,
+  image,
+  alt
+}: CreateImageProps): void => {
+  const imageLoaderPromise = (): Promise<string> =>
+    new Promise<string>((resolve, reject) => {
+      const img = new Image();
+      img.src = imageSrc;
+      img.onload = (): void => resolve(imageSrc);
+      img.onerror = (): void =>
+        reject(new Error(`Failed to load image ${imageSrc}`));
+    });
+
+  if (!isNil(image) || isEmpty(image)) {
+    return;
+  }
+
+  imageLoaderPromise()
+    .then((result: string): void => {
+      setImages((currentImages) => ({ ...currentImages, [alt]: result }));
+    })
+    .catch(() => {
+      setImages((currentImages) => ({ ...currentImages, [alt]: '' }));
+    });
+};
+
+export const useLoadImage = ({ imageSrc, alt }): boolean => {
+  const [images, setImages] = useAtom(imagesAtom);
+
+  const image = prop(alt, images);
+
+  createImage({ alt, image, imageSrc, setImages });
+
+  return !isNil(image) || isEmpty(image);
+};

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();
+  });
+});