@centreon/ui 24.7.0 → 24.7.2

package/src/{Home.stories.mdx → Home.mdx}

@@ -1,39 +1,41 @@
-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>
+{/* 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/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/TimePeriods/index.tsx

@@ -9,6 +9,7 @@ import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 
 import { ParentSize } from '..';
+import LoadingSkeleton from '../LoadingSkeleton';
 
 import { WrapperTimePeriodProps } from './models';
 import TimePeriods from './TimePeriods';
@@ -18,10 +19,17 @@ dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 dayjs.extend(duration);
 
-const WrapperTimePeriods = (props: WrapperTimePeriodProps): JSX.Element => (
+const WrapperTimePeriods = ({
+  skeletonHeight = 38,
+  ...rest
+}: WrapperTimePeriodProps): JSX.Element => (
   <ParentSize>
     {({ width }): JSX.Element => {
-      return <TimePeriods width={width} {...props} />;
+      return !width ? (
+        <LoadingSkeleton height={skeletonHeight} variant="rectangular" />
+      ) : (
+        <TimePeriods width={width} {...rest} />
+      );
     }}
   </ParentSize>
 );

package/src/TimePeriods/models.ts

@@ -109,4 +109,5 @@ export interface WrapperTimePeriodProps {
   getIsError?: (value: boolean) => void;
   getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
   renderExternalComponent?: ReactNode;
+  skeletonHeight?: number;
 }