@centreon/ui 24.7.1 → 24.7.2

package/src/Image/index.stories.tsx

@@ -1,101 +1,101 @@
-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
-};
+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/RichTextEditor/index.stories.tsx

@@ -1,102 +1,102 @@
-import { useState } from 'react';
-
-import { ComponentMeta } from '@storybook/react';
-import { EditorState } from 'lexical';
-
-import RichTextEditor from './RichTextEditor';
-import type { RichTextEditorProps } from './RichTextEditor';
-import initialEditorState from './initialEditorState.json';
-
-export default {
-  argTypes: {
-    editable: { control: false },
-    initialEditorState: { control: 'text' },
-    inputClassname: { control: 'text' },
-    minInputHeight: { control: 'number' },
-    namespace: { control: 'text' },
-    placeholder: { control: 'text' }
-  },
-  component: RichTextEditor,
-  title: 'RichTextEditor'
-} as ComponentMeta<typeof RichTextEditor>;
-
-const Template = (props: RichTextEditorProps): JSX.Element => (
-  <RichTextEditor {...props} />
-);
-
-export const normal = Template.bind({});
-
-export const withCustomEditorMinHeight = Template.bind({});
-withCustomEditorMinHeight.args = {
-  minInputHeight: 300
-};
-
-const StoryWithUpdateListener = (): JSX.Element => {
-  const [editorState, setEditorState] = useState<EditorState>();
-
-  return (
-    <div>
-      <Template getEditorState={setEditorState} />
-      <pre>{JSON.stringify(editorState, null, 2)}</pre>
-    </div>
-  );
-};
-
-export const withUpdateListener = (): JSX.Element => (
-  <StoryWithUpdateListener />
-);
-
-export const withInitialEditorState = Template.bind({});
-withInitialEditorState.args = {
-  initialEditorState: JSON.stringify(initialEditorState)
-};
-
-export const withCustomPlaceholder = Template.bind({});
-withCustomPlaceholder.args = {
-  placeholder: 'Custom placeholder...'
-};
-
-export const withMacrosPlugin = Template.bind({});
-withMacrosPlugin.args = {
-  displayMacrosButton: true
-};
-
-export const withEditableFalse = Template.bind({});
-withEditableFalse.args = {
-  editable: true,
-  editorState: JSON.stringify(initialEditorState),
-  initialEditorState: JSON.stringify(initialEditorState)
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  editable: false,
-  editorState: JSON.stringify(initialEditorState),
-  initialEditorState: JSON.stringify(initialEditorState)
-};
-
-const StoryWithEditableFalseLikePreview = (): JSX.Element => {
-  const [editorState, setEditorState] =
-    useState<EditorState>(initialEditorState);
-
-  return (
-    <div>
-      <Template
-        getEditorState={setEditorState}
-        initialEditorState={JSON.stringify(initialEditorState)}
-        namespace="editable"
-      />
-      <Template
-        editable={false}
-        editorStateForReadOnlyMode={JSON.stringify(editorState)}
-        namespace="uneditable"
-        placeholder=""
-      />
-    </div>
-  );
-};
-
-export const withEditableFalseLikePreview = (): JSX.Element => (
-  <StoryWithEditableFalseLikePreview />
-);
+import { useState } from 'react';
+
+import { ComponentMeta } from '@storybook/react';
+import { EditorState } from 'lexical';
+
+import RichTextEditor from './RichTextEditor';
+import type { RichTextEditorProps } from './RichTextEditor';
+import initialEditorState from './initialEditorState.json';
+
+export default {
+  argTypes: {
+    editable: { control: false },
+    initialEditorState: { control: 'text' },
+    inputClassname: { control: 'text' },
+    minInputHeight: { control: 'number' },
+    namespace: { control: 'text' },
+    placeholder: { control: 'text' }
+  },
+  component: RichTextEditor,
+  title: 'RichTextEditor'
+} as ComponentMeta<typeof RichTextEditor>;
+
+const Template = (props: RichTextEditorProps): JSX.Element => (
+  <RichTextEditor {...props} />
+);
+
+export const normal = Template.bind({});
+
+export const withCustomEditorMinHeight = Template.bind({});
+withCustomEditorMinHeight.args = {
+  minInputHeight: 300
+};
+
+const StoryWithUpdateListener = (): JSX.Element => {
+  const [editorState, setEditorState] = useState<EditorState>();
+
+  return (
+    <div>
+      <Template getEditorState={setEditorState} />
+      <pre>{JSON.stringify(editorState, null, 2)}</pre>
+    </div>
+  );
+};
+
+export const withUpdateListener = (): JSX.Element => (
+  <StoryWithUpdateListener />
+);
+
+export const withInitialEditorState = Template.bind({});
+withInitialEditorState.args = {
+  initialEditorState: JSON.stringify(initialEditorState)
+};
+
+export const withCustomPlaceholder = Template.bind({});
+withCustomPlaceholder.args = {
+  placeholder: 'Custom placeholder...'
+};
+
+export const withMacrosPlugin = Template.bind({});
+withMacrosPlugin.args = {
+  displayMacrosButton: true
+};
+
+export const withEditableFalse = Template.bind({});
+withEditableFalse.args = {
+  editable: true,
+  editorState: JSON.stringify(initialEditorState),
+  initialEditorState: JSON.stringify(initialEditorState)
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  editable: false,
+  editorState: JSON.stringify(initialEditorState),
+  initialEditorState: JSON.stringify(initialEditorState)
+};
+
+const StoryWithEditableFalseLikePreview = (): JSX.Element => {
+  const [editorState, setEditorState] =
+    useState<EditorState>(initialEditorState);
+
+  return (
+    <div>
+      <Template
+        getEditorState={setEditorState}
+        initialEditorState={JSON.stringify(initialEditorState)}
+        namespace="editable"
+      />
+      <Template
+        editable={false}
+        editorStateForReadOnlyMode={JSON.stringify(editorState)}
+        namespace="uneditable"
+        placeholder=""
+      />
+    </div>
+  );
+};
+
+export const withEditableFalseLikePreview = (): JSX.Element => (
+  <StoryWithEditableFalseLikePreview />
+);

package/src/ThemeProvider/index.tsx

@@ -17,10 +17,11 @@ import { autocompleteClasses } from '@mui/material/Autocomplete';
 import { ThemeOptions } from '@mui/material/styles/createTheme';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
-import RobotoLightWoff2 from '@centreon/ui/fonts/roboto-light-webfont.woff2';
-import RobotoRegularWoff2 from '@centreon/ui/fonts/roboto-regular-webfont.woff2';
-import RobotoMediumWoff2 from '@centreon/ui/fonts/roboto-medium-webfont.woff2';
-import RobotoBoldWoff2 from '@centreon/ui/fonts/roboto-bold-webfont.woff2';
+
+import RobotoMediumWoff2 from '../fonts/roboto-medium-webfont.woff2';
+import RobotoBoldWoff2 from '../fonts/roboto-bold-webfont.woff2';
+import RobotoLightWoff2 from '../fonts/roboto-light-webfont.woff2';
+import RobotoRegularWoff2 from '../fonts/roboto-regular-webfont.woff2';
 
 import { getPalette } from './palettes';
 

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -68,7 +68,7 @@ const DateTimePickerInput = ({
     >
       <DateTimePicker<dayjs.Dayjs>
         dayOfWeekFormatter={(dayOfWeek) =>
-          dayOfWeek.substring(0, 2).toLocaleUpperCase()
+          dayOfWeek.format('dd').toLocaleUpperCase()
         }
         desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
         disabled={disabled}

package/src/Typography/FluidTypography/index.stories.tsx

@@ -1,63 +1,63 @@
-import { ComponentMeta } from '@storybook/react';
-
-import { Box } from '@mui/material';
-
-import FluidTypography, { FluidTypographyProps } from '.';
-
-interface Props extends FluidTypographyProps {
-  height?: string | number;
-  width?: string | number;
-}
-
-const FluidTypographyTemplate = ({
-  width = '900px',
-  height = '700px',
-  text,
-  variant
-}: Props): JSX.Element => {
-  return (
-    <Box sx={{ height, width }}>
-      <FluidTypography text={text} variant={variant} />
-    </Box>
-  );
-};
-
-export default {
-  argTypes: {
-    height: { control: 'text' },
-    text: { control: 'text' },
-    variant: { control: 'text' },
-    width: { control: 'text' }
-  },
-  component: FluidTypographyTemplate,
-  title: 'Fluid Typography'
-} as ComponentMeta<typeof FluidTypographyTemplate>;
-
-export const basic = FluidTypographyTemplate.bind({});
-basic.args = {
-  text: 'Hello world'
-};
-
-export const with200pxWidth = FluidTypographyTemplate.bind({});
-with200pxWidth.args = {
-  height: '50%',
-  text: 'Hello world',
-  width: '50%'
-};
-
-export const with20pxHeight = FluidTypographyTemplate.bind({});
-with20pxHeight.args = {
-  height: '20px',
-  text: 'Hello world'
-};
-
-export const withLongText = FluidTypographyTemplate.bind({});
-withLongText.args = {
-  text: 'This is a very long text becaaaaaaause it has a lot to sayyyyy !!!!!!!!'
-};
-
-export const withHeading5Variant = FluidTypographyTemplate.bind({});
-withHeading5Variant.args = {
-  text: 'Hello world',
-  variant: 'h5'
-};
+import { ComponentMeta } from '@storybook/react';
+
+import { Box } from '@mui/material';
+
+import FluidTypography, { FluidTypographyProps } from '.';
+
+interface Props extends FluidTypographyProps {
+  height?: string | number;
+  width?: string | number;
+}
+
+const FluidTypographyTemplate = ({
+  width = '900px',
+  height = '700px',
+  text,
+  variant
+}: Props): JSX.Element => {
+  return (
+    <Box sx={{ height, width }}>
+      <FluidTypography text={text} variant={variant} />
+    </Box>
+  );
+};
+
+export default {
+  argTypes: {
+    height: { control: 'text' },
+    text: { control: 'text' },
+    variant: { control: 'text' },
+    width: { control: 'text' }
+  },
+  component: FluidTypographyTemplate,
+  title: 'Fluid Typography'
+} as ComponentMeta<typeof FluidTypographyTemplate>;
+
+export const basic = FluidTypographyTemplate.bind({});
+basic.args = {
+  text: 'Hello world'
+};
+
+export const with200pxWidth = FluidTypographyTemplate.bind({});
+with200pxWidth.args = {
+  height: '50%',
+  text: 'Hello world',
+  width: '50%'
+};
+
+export const with20pxHeight = FluidTypographyTemplate.bind({});
+with20pxHeight.args = {
+  height: '20px',
+  text: 'Hello world'
+};
+
+export const withLongText = FluidTypographyTemplate.bind({});
+withLongText.args = {
+  text: 'This is a very long text becaaaaaaause it has a lot to sayyyyy !!!!!!!!'
+};
+
+export const withHeading5Variant = FluidTypographyTemplate.bind({});
+withHeading5Variant.args = {
+  text: 'Hello world',
+  variant: 'h5'
+};

package/src/components/Form/AccessRights/AccessRights.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 
 import { SnackbarProvider } from '../../..';
 
@@ -18,11 +18,11 @@ const meta: Meta<typeof AccessRightsForm> = {
   parameters: {
     msw: {
       handlers: [
-        rest.get('api/latest/contact?**', (req, res, ctx) => {
-          return res(ctx.json(buildResult(false)));
+        http.get('api/latest/contact?**', () => {
+          return HttpResponse.json(buildResult(false));
         }),
-        rest.get('api/latest/contactGroup?**', (req, res, ctx) => {
-          return res(ctx.json(buildResult(true)));
+        http.get('api/latest/contactGroup?**', () => {
+          return HttpResponse.json(buildResult(true));
         })
       ]
     }

package/test/setupTests.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-undef */
 
+import '@testing-library/jest-dom';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import fetchMock from 'jest-fetch-mock';