@centreon/ui 24.11.13 → 24.11.14

package/src/Form/storiesData.tsx

@@ -1,14 +1,13 @@
 import { FormikValues, useFormikContext } from 'formik';
+import * as Yup from 'yup';
 import { equals, prop } from 'ramda';
 
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import MailIcon from '@mui/icons-material/MailOutline';
 import { Typography } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
 import { SelectEntry } from '../InputField/Select';
 import { Listing } from '../api/models';
 
-import { array, boolean, mixed, number, object, string } from 'yup';
 import {
   Group,
   InputProps,
@@ -43,43 +42,48 @@ export interface BasicForm {
   sports: Array<SelectEntry>;
 }
 
-const selectEntryValidationSchema = object().shape({
-  id: number().required('Required'),
-  name: string().required('Required')
+const selectEntryValidationSchema = Yup.object().shape({
+  id: Yup.number().required('Required'),
+  name: Yup.string().required('Required')
 });
 
-export const basicFormValidationSchema = object().shape({
-  active: boolean().required('Active is required'),
-  activeSortableFieldsTable: boolean().required(
+export const basicFormValidationSchema = Yup.object().shape({
+  active: Yup.boolean().required('Active is required'),
+  activeSortableFieldsTable: Yup.boolean().required(
     'Active Sortable FieldsTable is required'
   ),
-  animals: array().of(selectEntryValidationSchema.required('Required')),
-  anotherText: string(),
-  certificate: string(),
+  animals: Yup.array().of(selectEntryValidationSchema.required('Required')),
+  anotherText: Yup.string(),
+  certificate: Yup.string(),
   class: selectEntryValidationSchema.nullable().required('Required'),
-  custom: string().required('Custom is required'),
-  email: string().email('Invalid email').required('Email is required'),
+  custom: Yup.string().required('Custom is required'),
+  email: Yup.string().email('Invalid email').required('Email is required'),
   group: selectEntryValidationSchema.nullable().required('Required'),
-  inviteUsers: array().of(
-    object({
-      email: string().email('Invalid user email').required('Email is required'),
+  inviteUsers: Yup.array().of(
+    Yup.object({
+      email: Yup.string()
+        .email('Invalid user email')
+        .required('Email is required'),
       role: selectEntryValidationSchema
     })
   ),
-  inviteUsers2: array().of(string().email('Invalid user email')),
-  isForced: boolean().required('Is forced is required'),
-  language: string().required('Language is required'),
-  name: string().required('Name is required'),
-  password: string().required('Password is required'),
-  roleMapping: array().of(
-    object({
+  inviteUsers2: Yup.array().of(Yup.string().email('Invalid user email')),
+  isForced: Yup.boolean().required('Is forced is required'),
+  language: Yup.string().required('Language is required'),
+  name: Yup.string().required('Name is required'),
+  password: Yup.string().required('Password is required'),
+  roleMapping: Yup.array().of(
+    Yup.object({
       role: selectEntryValidationSchema,
-      value: string().required('Role value is required')
+      value: Yup.string().required('Role value is required')
     })
   ),
-  scopes: array().of(string().min(3, '3 characters min').required('Required')),
-  sports: array().of(selectEntryValidationSchema.required('Required')),
-  file: mixed()
+  scopes: Yup.array().of(
+    Yup.string().min(3, '3 characters min').required('Required')
+  ),
+  sports: Yup.array()
+    .of(selectEntryValidationSchema.required('Required'))
+    .min(2, 'Choose at least 2 sports')
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -111,11 +115,6 @@ export const basicFormInitialValues = {
   isForced: false,
   language: 'French',
   name: '',
-  notifications: {
-    channels: { Icon: MailIcon, checked: true, label: 'mail' },
-    hostevents: ['ok', 'warning'],
-    includeServices: { checked: true, label: 'Include services for this host' }
-  },
   password: '',
   roleMapping: [
     {
@@ -135,8 +134,7 @@ export const basicFormInitialValues = {
     }
   ],
   scopes: [],
-  sports: [],
-  file: null
+  sports: []
 };
 
 export const classOptions = [...Array(10).keys()].map((idx) => ({
@@ -159,10 +157,6 @@ export const basicFormGroups: Array<Group> = [
     TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>,
     name: 'Second group',
     order: 2
-  },
-  {
-    name: 'Third group',
-    order: 3
   }
 ];
 
@@ -177,10 +171,6 @@ export const basicFormInputs: Array<InputProps> = [
     fieldName: 'email',
     group: 'First group',
     label: 'Email',
-    text: {
-      endAdornment: <MailIcon />,
-      placeholder: 'Your email here'
-    },
     type: InputType.Text
   },
   {
@@ -215,41 +205,6 @@ export const basicFormInputs: Array<InputProps> = [
     },
     type: InputType.Radio
   },
-  {
-    additionalLabel: 'Notifications',
-    fieldName: '',
-    grid: {
-      alignItems: 'center',
-      columns: [
-        {
-          checkbox: {
-            direction: 'horizontal'
-          },
-          fieldName: 'notifications.channels',
-          label: 'channels',
-          type: InputType.Checkbox
-        },
-        {
-          fieldName: 'notifications.includeServices',
-          label: 'Iclude services',
-          type: InputType.Checkbox
-        },
-        {
-          checkbox: {
-            direction: 'horizontal',
-            labelPlacement: 'top',
-            options: ['ok', 'warning', 'critical', 'unknown']
-          },
-          fieldName: 'notifications.hostevents',
-          label: 'host events',
-          type: InputType.CheckboxGroup
-        }
-      ]
-    },
-    group: 'Third group',
-    label: 'Notifications',
-    type: InputType.Grid
-  },
   {
     fieldName: 'anotherText',
     group: 'First group',
@@ -446,16 +401,6 @@ export const basicFormInputs: Array<InputProps> = [
       multilineRows: 4
     },
     type: InputType.Text
-  },
-  {
-    fieldName: 'file',
-    group: 'First group',
-    label: 'File',
-    type: InputType.File,
-    file: {
-      accept: 'image/*',
-      multiple: true
-    }
   }
 ];
 

package/src/Form/translatedLabels.ts

@@ -5,4 +5,3 @@ export const labelSaved = 'Saved';
 export const labelReset = 'Reset';
 export const labelDisplayThePassword = 'Display the password';
 export const labelHideThePassword = 'Hide the password';
-export const labelDropOrSelectAFile = 'Drop or select a file';

package/src/Home.stories.mdx

@@ -0,0 +1,122 @@
+import { Meta } from '@storybook/addon-docs'
+import { Typography, Box, Paper, Accordion, AccordionSummary, AccordionDetails, Link, Stack } from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+import { MdxThemeProvider } from './StoryBookThemeProvider'
+
+<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>
+<br />
+
+<Accordion>
+  <AccordionSummary
+    expandIcon={<ExpandMoreIcon />}
+  >
+    <Typography variant="h5">Add stories</Typography>
+  </AccordionSummary>
+  <AccordionDetails>
+    <ul>
+      <li><Typography>Create a file named `index.stories.tsx` along side your component</Typography></li>
+      <li>
+        <Typography>Add a title, the component and argTypes</Typography>
+        <Typography>Example: </Typography>
+
+        ```typescript
+        export default {
+          title: 'MyComponent',
+          Component: MyComponent,
+          argTypes: {
+            propA: { control: 'text' },
+            propB: { control: 'number' },
+          },
+        };
+        ```
+
+      </li>
+      <li>
+        <Typography>Create a playground for your component</Typography>
+
+        ```typescript
+          const Template: ComponentStory<typeof MyComponent> = (args) => (
+            <MyComponent {...args} />
+          );
+
+          export const Playground = Template.bind({});
+        ```
+
+      </li> 
+      <li>
+        <Typography>Then add your story</Typography>
+
+        ```typescript
+          export const basic = Template.bind({});
+          basic.args = { propA: 'test', propB: 0 };
+        ```
+
+      </li>
+    </ul>
+  </AccordionDetails>
+</Accordion>
+<Accordion>
+  <AccordionSummary
+    expandIcon={<ExpandMoreIcon />}
+  >
+    <Typography variant="h5">Run tests</Typography>
+  </AccordionSummary>
+  <AccordionDetails>
+    <Typography>There are two kinds of tests in Centreon UI.</Typography>
+    <Typography>Jest + RTL: Component testing</Typography>
+    <Typography>Storyshots: When running them, storybook will capture a snapshot for each and compares them with the older ones</Typography>
+    <br />
+
+    <Typography>Run all the test (Jest + Storyshots)</Typography>
+    `pnpm build:storybook && pnpm t`
+    <br />
+
+    <Typography>Run storyshots following one or more story title</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent"`
+    <Typography>Or</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent"`
+    <br />
+
+    <Typography>Update snapshots</Typography>
+    `pnpm build:storybook && pnpm t -- -u`
+    <Typography>Or</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent" -u`
+    <Typography>Or</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent" -u`
+  </AccordionDetails>
+</Accordion>

package/src/Icon/IconAttach/index.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
@@ -42,11 +45,13 @@ interface Props {
   defaultImage: string;
   imgSource: string;
   labelNoIcon?: string;
+  onClick: () => void;
   title: string;
   uploadedImage: string;
 }
 
 const IconAttach = ({
+  onClick,
   defaultImage,
   uploadedImage,
   imgSource,
@@ -56,7 +61,7 @@ const IconAttach = ({
   const { classes } = useStyles();
 
   return (
-    <span className={classes.iconAttach}>
+    <span className={classes.iconAttach} onClick={onClick}>
       {defaultImage && (
         <span className={classes.iconAttachLabel}>{labelNoIcon}</span>
       )}

package/src/Image/Image.tsx

@@ -1,75 +1,65 @@
-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);
+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);

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