@centreon/ui 23.10.19 → 23.10.20-MON-18490-widgets.0

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

@@ -0,0 +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: '200px',
+  text: 'Hello world',
+  width: '200px'
+};
+
+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/Typography/FluidTypography/index.tsx

@@ -0,0 +1,51 @@
+import { useRef } from 'react';
+
+import { Typography, TypographyProps } from '@mui/material';
+
+import useFluidResizeObserver from './useFluidResizeObserver';
+
+type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
+export interface FluidTypographyProps extends CustomTypographyProps {
+  className?: string;
+  text: string;
+}
+
+const FluidTypography = ({
+  text,
+  variant = 'body1',
+  className
+}: FluidTypographyProps): JSX.Element => {
+  const containerRef = useRef<HTMLElement>();
+  const parentRef = useRef<HTMLElement>();
+
+  const size = useFluidResizeObserver({ ref: containerRef });
+  const parentSize = useFluidResizeObserver({ isParent: true, ref: parentRef });
+
+  return (
+    <div
+      ref={parentRef}
+      style={{
+        height: `${parentSize.height}px`,
+        width: `100%`
+      }}
+    >
+      <div ref={containerRef} style={{ height: '100%', width: '100%' }}>
+        <Typography
+          className={className}
+          sx={{
+            fontSize: `clamp(10px, min(${Math.floor(
+              size.width / 6
+            )}px, ${Math.floor(size.height / 6)}px), min(${size.width}px, ${
+              size.height
+            }px))`
+          }}
+          variant={variant}
+        >
+          {text}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default FluidTypography;

package/src/Typography/FluidTypography/useFluidResizeObserver.ts

@@ -0,0 +1,56 @@
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
+interface Size {
+  height: number;
+  width: number;
+}
+
+interface UseFluidResizeObserver {
+  isParent?: boolean;
+  ref: MutableRefObject<HTMLElement | undefined>;
+}
+
+const useFluidResizeObserver = ({
+  ref,
+  isParent
+}: UseFluidResizeObserver): Size => {
+  const [size, setSize] = useState<Size>({ height: 0, width: 0 });
+
+  const observer = useRef<ResizeObserver | null>(null);
+
+  const resizeObserver = useCallback(
+    (element) => {
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+
+      observer.current = new ResizeObserver(
+        ([entry]: Array<ResizeObserverEntry>) => {
+          setSize({
+            height: entry.target?.getBoundingClientRect().height || 0,
+            width: entry.target?.getBoundingClientRect().width || 0
+          });
+        }
+      );
+
+      if (element && observer.current) {
+        observer.current.observe(element);
+      }
+    },
+    [ref.current]
+  );
+
+  useEffect(() => {
+    resizeObserver(isParent ? ref.current?.parentElement : ref.current);
+  }, [ref.current]);
+
+  return size;
+};
+
+export default useFluidResizeObserver;

package/src/Typography/{index.stories.tsx → Typography.stories.tsx}

@@ -1,16 +1,16 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import TypographtStory from '.';
+import TypographyStory from './story.utils';
 
 export default {
   argTypes: {},
-  component: TypographtStory,
+  component: TypographyStory,
   title: 'Typography'
-} as ComponentMeta<typeof TypographtStory>;
+} as ComponentMeta<typeof TypographyStory>;
 
-const TemplateTypographtStory: ComponentStory<typeof TypographtStory> = (
+const TemplateTypographtStory: ComponentStory<typeof TypographyStory> = (
   args
-) => <TypographtStory {...args} />;
+) => <TypographyStory {...args} />;
 
 export const typography = (): JSX.Element => (
   <TemplateTypographtStory text="Hello world" />

package/src/index.ts

@@ -82,6 +82,15 @@ export type {
 } from './api/buildListingEndpoint/models';
 export { default as buildListingDecoder } from './api/buildListingDecoder';
 
+export {
+  default as useLocaleDateTimeFormat,
+  dateTimeFormat,
+  dateFormat,
+  timeFormat
+} from './utils/useLocaleDateTimeFormat';
+
+export { default as useDebounce } from './utils/useDebounce';
+export { default as useIntersectionObserver } from './utils/useIntersectionObserver';
 export { default as ContentWithCircularLoading } from './ContentWithCircularProgress';
 export {
   setUrlQueryParameters,
@@ -93,6 +102,12 @@ export type {
   ListsSearchParameter
 } from './api/buildListingEndpoint/models';
 
+export {
+  default as useMemoComponent,
+  useDeepCompare
+} from './utils/useMemoComponent';
+export { default as useCopyToClipboard } from './utils/useCopyToClipboard';
+
 export { default as MenuSkeleton } from './MenuSkeleton';
 export { default as PopoverMenu } from './PopoverMenu';
 
@@ -128,6 +143,8 @@ export {
 } from './FileDropZone';
 export type { CustomDropZoneContentProps } from './FileDropZone';
 export { default as TestQueryProvider } from './api/TestQueryProvider';
+export * from './utils/useThemeMode';
+export * from './utils/typedMemo';
 export * from './FallbackPage/FallbackPage';
 export * from './Logo/CentreonLogo';
 export * from './TopCounterElements';
@@ -135,7 +152,9 @@ export { default as Image, ImageVariant } from './Image/Image';
 export { default as WallpaperPage } from './WallpaperPage';
 export { RichTextEditor } from './RichTextEditor';
 export { default as ActionsList } from './ActionsList';
+export { getStatusColors, SeverityCode } from './utils/statuses';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
 
-export * from './utils';
+export { default as FluidTypography } from './Typography/FluidTypography';
+export * from './Dashboard';

package/src/utils/getNormalizedId.ts

@@ -1,3 +1,5 @@
-export const getNormalizedId = (idToNormalized: string): string => {
+const getNormalizedId = (idToNormalized: string): string => {
   return idToNormalized?.replace(/[^A-Z0-9]+/gi, '');
 };
+
+export default getNormalizedId;

package/src/utils/useCopyToClipboard.ts

@@ -10,8 +10,7 @@ interface Props {
   errorMessage: string;
   successMessage: string;
 }
-
-export const useCopyToClipboard = ({
+const useCopyToClipboard = ({
   successMessage,
   errorMessage
 }: Props): Result => {
@@ -54,3 +53,5 @@ export const useCopyToClipboard = ({
 
   return { copy };
 };
+
+export default useCopyToClipboard;

package/src/utils/useDebounce.ts

@@ -6,7 +6,7 @@ interface Props {
   wait: number;
 }
 
-export const useDebounce = ({
+const useDebounce = ({
   functionToDebounce,
   wait,
   memoProps = []
@@ -23,3 +23,5 @@ export const useDebounce = ({
     }, wait);
   }, memoProps);
 };
+
+export default useDebounce;

package/src/utils/useDeepCallback.ts

@@ -7,9 +7,11 @@ interface UseDeepCallback<TParameters, TReturn, TMemoProps> {
   deps: Array<TMemoProps>;
 }
 
-export const useDeepCallback = <TParameters, TReturn, TMemoProps>({
+const useDeepCallback = <TParameters, TReturn, TMemoProps>({
   deps,
   callback
 }: UseDeepCallback<TParameters, TReturn, TMemoProps>): ((
   props: TParameters
 ) => TReturn) => useCallback((props) => callback(props), useDeepCompare(deps));
+
+export default useDeepCallback;

package/src/utils/useDeepMemo.ts

@@ -7,8 +7,10 @@ interface UseDeepMemo<TVariable, TMemoProps> {
   variable: TVariable;
 }
 
-export const useDeepMemo = <TVariable, TMemoProps>({
+const useDeepMemo = <TVariable, TMemoProps>({
   deps,
   variable
 }: UseDeepMemo<TVariable, TMemoProps>): TVariable =>
   useMemo(() => variable, useDeepCompare(deps));
+
+export default useDeepMemo;

package/src/utils/useIntersectionObserver.ts

@@ -7,7 +7,7 @@ interface HookParam {
   page: number;
 }
 
-export const useIntersectionObserver = ({
+const useIntersectionObserver = ({
   maxPage,
   page,
   loading,
@@ -41,3 +41,5 @@ export const useIntersectionObserver = ({
 
   return lastElementRef;
 };
+
+export default useIntersectionObserver;

package/src/utils/useKeyObserver.tsx

@@ -4,7 +4,7 @@ interface UseKeyObserverProps {
   isShiftKeyDown: boolean;
 }
 
-export const useKeyObserver = (): UseKeyObserverProps => {
+const useKeyObserver = (): UseKeyObserverProps => {
   const [isShiftKeyDown, setIsShiftKeyDown] = useState<boolean>(false);
 
   const pressShift = (): void => setIsShiftKeyDown(true);
@@ -34,3 +34,5 @@ export const useKeyObserver = (): UseKeyObserverProps => {
     isShiftKeyDown
   };
 };
+
+export default useKeyObserver;

package/src/utils/useLocaleDateTimeFormat/index.test.tsx

@@ -10,7 +10,7 @@ import { Provider, useSetAtom } from 'jotai';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import { useLocaleDateTimeFormat } from '.';
+import useLocaleDateTimeFormat from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -87,4 +87,5 @@ const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
   };
 };
 
-export { dateTimeFormat, dateFormat, timeFormat, useLocaleDateTimeFormat };
+export default useLocaleDateTimeFormat;
+export { dateTimeFormat, dateFormat, timeFormat };

package/src/utils/useLocaleDateTimeFormat/localeFallback.test.tsx

@@ -10,7 +10,7 @@ import { render, RenderResult } from '@testing-library/react';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import { useLocaleDateTimeFormat } from '.';
+import useLocaleDateTimeFormat from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useMemoComponent.ts

@@ -19,8 +19,10 @@ interface MemoComponent {
   memoProps: Array<unknown>;
 }
 
-export const useMemoComponent = ({
+const useMemoComponent = ({
   Component,
   memoProps
 }: MemoComponent): JSX.Element =>
   useMemo(() => Component, useDeepCompare(memoProps));
+
+export default useMemoComponent;

package/src/utils/index.ts

@@ -1,15 +0,0 @@
-export * from './useLocaleDateTimeFormat';
-export * from './getNormalizedId';
-export * from './statuses';
-export * from './typedMemo';
-export * from './useCopyToClipboard';
-export * from './useDateTimePickerAdapter';
-export * from './useDebounce';
-export * from './useDeepCallback';
-export * from './useDeepMemo';
-export * from './useIntersectionObserver';
-export * from './useKeyObserver';
-export * from './useLoadImage';
-export * from './useMemoComponent';
-export * from './useThemeMode';
-export * from './useViewportIntersection';