@centreon/ui 24.4.21 → 24.4.22

package/src/base/tokens/themes/ui-light.tokens.ts

@@ -0,0 +1,38 @@
+/**
+ * Do not edit directly
+ * Generated on Sun, 04 Jun 2023 10:14:22 GMT
+ */
+
+export const colorBlue50 = '#ecf4fdff';
+export const colorBlue100 = '#d2e4f9ff';
+export const colorBlue200 = '#9ec4f0ff';
+export const colorBlue300 = '#6da4e4ff';
+export const colorBlue400 = '#3e85d5ff';
+export const colorBlue500 = '#2e68aaff';
+export const colorBlue600 = '#205593ff';
+export const colorBlue700 = '#164274ff';
+export const colorBlue800 = '#0d2e54ff';
+export const colorBlue900 = '#071d37ff';
+export const colorBlue950 = '#031326ff';
+export const colorPurple50 = '#f8f1f9ff';
+export const colorPurple100 = '#f0def2ff';
+export const colorPurple200 = '#ddafe4ff';
+export const colorPurple300 = '#ce81daff';
+export const colorPurple400 = '#c151d2ff';
+export const colorPurple500 = '#ac28c1ff';
+export const colorPurple600 = '#872796ff';
+export const colorPurple700 = '#682172ff';
+export const colorPurple800 = '#491b50ff';
+export const colorPurple900 = '#29112cff';
+export const colorPurple950 = '#1a0d1cff';
+export const colorGrey50 = '#f9fafbff';
+export const colorGrey100 = '#eaedf0ff';
+export const colorGrey200 = '#cad0d8ff';
+export const colorGrey300 = '#aab4c0ff';
+export const colorGrey400 = '#8c98a6ff';
+export const colorGrey500 = '#6f7b8aff';
+export const colorGrey600 = '#596573ff';
+export const colorGrey700 = '#434e5bff';
+export const colorGrey800 = '#2f3741ff';
+export const colorGrey900 = '#1b2127ff';
+export const colorGrey950 = '#101418ff';

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  component: Avatar
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    children: 'Label'
+  }
+};
+
+export const compact: Story = {
+  args: {
+    ...Default.args,
+    compact: true
+  }
+};

package/src/components/Avatar/Avatar.styles.ts

@@ -0,0 +1,11 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useAvatarStyles = makeStyles()((theme) => ({
+  avatar: {
+    '&[data-compact="true"]': {
+      fontSize: theme.typography.body1.fontSize,
+      height: theme.spacing(2),
+      width: theme.spacing(2)
+    }
+  }
+}));

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+import { AvatarProps, Avatar as MUIAvatar } from '@mui/material';
+
+import { useAvatarStyles } from './Avatar.styles';
+
+interface Props extends AvatarProps {
+  children: ReactNode;
+  className?: string;
+  compact?: boolean;
+}
+
+const Avatar = ({
+  compact = false,
+  children,
+  className,
+  ...attr
+}: Props): JSX.Element => {
+  const { classes, cx } = useAvatarStyles();
+
+  return (
+    <MUIAvatar
+      {...attr}
+      className={cx(classes.avatar, className)}
+      data-compact={`${compact}`}
+    >
+      {children}
+    </MUIAvatar>
+  );
+};
+
+export default Avatar;

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Add as AddIcon } from '@mui/icons-material';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    'aria-label': 'button',
+    children: 'Label'
+  }
+};
+
+export const WithIcon: Story = {
+  args: {
+    ...Default.args,
+    icon: <AddIcon />,
+    iconVariant: 'start'
+  }
+};
+
+export const AsDanger: Story = {
+  args: {
+    ...Default.args,
+    isDanger: true
+  }
+};

package/src/components/Button/Button.styles.ts

@@ -0,0 +1,44 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  button: {
+    '&[data-size="medium"]': {
+      fontSize: '16px',
+      height: 'unset',
+      lineHeight: '24px'
+    },
+
+    '&[data-size="small"]': {
+      '&[data-variant="primary"], &[data-variant="secondary"]': {
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2)
+      },
+      fontSize: '14px',
+      height: 'unset',
+      lineHeight: '22px'
+    },
+
+    '&[data-variant="primary"]:not(:disabled)': {
+      '&[data-is-danger="true"]': {
+        backgroundColor: theme.palette.error.main
+      },
+
+      backgroundColor: theme.palette.primary.main
+    },
+
+    '&[data-variant="secondary"]:not(:disabled)': {
+      '&[data-is-danger="true"]': {
+        borderColor: theme.palette.error.main,
+        color: theme.palette.error.main
+      },
+
+      borderColor: theme.palette.primary.main,
+      color: theme.palette.primary.main
+    },
+
+    textWrap: 'noWrap',
+    transition: 'unset'
+  }
+}));
+
+export { useStyles };

package/src/components/Button/Button.tsx

@@ -0,0 +1,78 @@
+import { ReactElement, ReactNode, useMemo } from 'react';
+
+import { Button as MuiButton } from '@mui/material';
+
+import { AriaLabelingAttributes } from '../../@types/aria-attributes';
+import { DataTestAttributes } from '../../@types/data-attributes';
+
+import { useStyles } from './Button.styles';
+
+const muiVariantMap: Record<
+  Required<ButtonProps>['variant'],
+  'text' | 'outlined' | 'contained'
+> = {
+  ghost: 'text',
+  primary: 'contained',
+  secondary: 'outlined'
+};
+
+export type ButtonProps = {
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  icon?: string | ReactNode;
+  iconVariant?: 'none' | 'start' | 'end';
+  isDanger?: boolean;
+  onClick?: (e) => void;
+  ref?: React.Ref<HTMLButtonElement>;
+  size?: 'small' | 'medium' | 'large';
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary' | 'ghost';
+} & AriaLabelingAttributes &
+  DataTestAttributes;
+
+const Button = ({
+  children,
+  variant = 'primary',
+  size = 'medium',
+  iconVariant = 'none',
+  icon,
+  type = 'button',
+  disabled = false,
+  onClick,
+  isDanger = false,
+  className = '',
+  ...attr
+}: ButtonProps): ReactElement => {
+  const { classes, cx } = useStyles();
+
+  const MuiOverrideProps = useMemo(
+    () => ({
+      color: 'primary' as const,
+      ...(iconVariant === 'start' && { startIcon: icon }),
+      ...(iconVariant === 'end' && { endIcon: icon })
+    }),
+    [icon, iconVariant]
+  );
+
+  return (
+    <MuiButton
+      className={cx(classes.button, className)}
+      data-icon-variant={iconVariant}
+      data-is-danger={isDanger}
+      data-size={size}
+      data-variant={variant}
+      disabled={disabled}
+      size={size}
+      type={type}
+      variant={muiVariantMap[variant]}
+      onClick={(e) => onClick?.(e)}
+      {...MuiOverrideProps}
+      {...attr}
+    >
+      {children}
+    </MuiButton>
+  );
+};
+
+export { Button };

package/src/components/Button/Icon/IconButton.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Add as AddIcon } from '@mui/icons-material';
+
+import { IconButton } from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+  component: IconButton
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const Default: Story = {
+  args: {
+    icon: <AddIcon />
+  }
+};

package/src/components/Button/Icon/IconButton.styles.ts

@@ -0,0 +1,14 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  iconButton: {
+    '&[data-size="small"]': {
+      '& > svg, & > .MuiSvgIcon-root': {
+        fontSize: '1.125rem'
+      },
+      padding: theme.spacing(0.75)
+    }
+  }
+}));
+
+export { useStyles };

package/src/components/Button/Icon/IconButton.tsx

@@ -0,0 +1,62 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import {
+  IconButton as MuiIconButton,
+  IconButtonProps as MuiIconButtonProps
+} from '@mui/material';
+
+import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
+import { DataTestAttributes } from '../../../@types/data-attributes';
+
+import { useStyles } from './IconButton.styles';
+
+const muiColorMap: Record<
+  Required<IconButtonProps>['variant'],
+  'primary' | 'secondary' | 'default'
+> = {
+  ghost: 'default',
+  primary: 'primary',
+  secondary: 'secondary'
+};
+
+type IconButtonProps = {
+  disabled?: boolean;
+  icon?: string | ReactNode;
+  onClick?: (e) => void;
+  size?: 'small' | 'medium' | 'large';
+  variant?: 'primary' | 'secondary' | 'ghost';
+} & AriaLabelingAttributes &
+  DataTestAttributes &
+  MuiIconButtonProps;
+
+/**
+ * @todo re-factor as `iconVariant: 'icon-only'` Button variant, and remove IconButton component (reason: code duplication)
+ */
+const IconButton = ({
+  variant = 'primary',
+  size = 'medium',
+  icon,
+  disabled = false,
+  onClick,
+  ...attr
+}: IconButtonProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <MuiIconButton
+      className={classes.iconButton}
+      data-size={size}
+      data-variant={variant}
+      disabled={disabled}
+      size={size}
+      onClick={(e) => onClick?.(e)}
+      {...attr}
+      // Mui overrides
+      color={muiColorMap[variant]}
+    >
+      {icon}
+    </MuiIconButton>
+  );
+};
+
+export { IconButton };

package/src/components/Button/Icon/index.tsx

@@ -0,0 +1 @@
+export * from './IconButton';

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './Icon';

package/src/components/CollapsibleItem/CollapsibleItem.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CollapsibleItem } from './CollapsibleItem';
+
+const meta: Meta<typeof CollapsibleItem> = {
+  component: CollapsibleItem
+};
+
+export default meta;
+type Story = StoryObj<typeof CollapsibleItem>;
+
+export const Default: Story = {
+  args: {
+    children: 'Label',
+    title: 'Title'
+  }
+};
+
+export const ExpandedByDefault: Story = {
+  args: {
+    children: 'Label',
+    defaultExpanded: true,
+    title: 'Title'
+  }
+};

package/src/components/CollapsibleItem/CollapsibleItem.tsx

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+
+import {
+  AccordionDetails,
+  AccordionSummary,
+  Accordion,
+  Typography
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+import { useCollapsibleItemStyles } from './useCollapsibleItemStyles';
+
+interface Props {
+  children: ReactNode;
+  defaultExpanded?: boolean;
+  title: string;
+}
+
+export const CollapsibleItem = ({
+  title,
+  children,
+  defaultExpanded
+}: Props): JSX.Element => {
+  const { classes } = useCollapsibleItemStyles();
+
+  return (
+    <Accordion
+      disableGutters
+      className={classes.accordion}
+      defaultExpanded={defaultExpanded}
+    >
+      <AccordionSummary
+        classes={{
+          content: classes.accordionSummary
+        }}
+        expandIcon={<ExpandMoreIcon color="primary" />}
+      >
+        <Typography color="primary" variant="h6">
+          {title}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails className={classes.accordionDetails}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+};

package/src/components/CollapsibleItem/index.ts

@@ -0,0 +1 @@
+export { CollapsibleItem } from './CollapsibleItem';

package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts

@@ -0,0 +1,15 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useCollapsibleItemStyles = makeStyles()((theme) => ({
+  accordion: {
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  accordionDetails: {
+    padding: theme.spacing(0, 2, 2)
+  },
+  accordionSummary: {
+    margin: theme.spacing(1.5, 0)
+  }
+}));

package/src/components/DataTable/DataListing.tsx

@@ -0,0 +1,6 @@
+import { RowId } from '../../Listing/models';
+import { Listing, ListingProps } from '../..';
+
+export const DataListing = <TRow extends { id: RowId }>(
+  props: ListingProps<TRow>
+): JSX.Element => <Listing<TRow> {...props} />;

package/src/components/DataTable/DataTable.cypress.spec.tsx

@@ -0,0 +1,193 @@
+import { Box } from '@mui/material';
+
+import { ColumnType } from '../../Listing/models';
+
+import { DataTable } from '.';
+
+const data = Array(5)
+  .fill(0)
+  .map((_, idx) => ({
+    description: `Description ${idx}`,
+    id: idx,
+    title: `Entity ${idx}`
+  }));
+
+const initializeDataTableGrid = ({
+  hasActions,
+  hasCardAction,
+  canDelete
+}): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <DataTable variant="grid">
+        {data.map(({ title, description }) => (
+          <DataTable.Item
+            description={description}
+            hasActions={hasActions}
+            hasCardAction={hasCardAction}
+            key={title}
+            labelsDelete={{
+              cancel: 'Cancel',
+              confirm: {
+                label: 'Delete'
+              }
+            }}
+            title={title}
+            onDelete={canDelete ? cy.stub() : undefined}
+          />
+        ))}
+      </DataTable>
+    )
+  });
+};
+
+const initializeDataTableEmpty = (canCreate = false): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <DataTable isEmpty variant="grid">
+        <DataTable.EmptyState
+          canCreate={canCreate}
+          labels={{
+            actions: {
+              create: 'Create'
+            },
+            title: 'Welcome'
+          }}
+          onCreate={cy.stub()}
+        />
+      </DataTable>
+    )
+  });
+};
+
+const initializeDataTableListing = (): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <Box sx={{ height: '100vh' }}>
+        <DataTable variant="listing">
+          <DataTable.Listing
+            columns={[
+              {
+                getFormattedString: (row) => row.title,
+                id: 'title',
+                label: 'Title',
+                type: ColumnType.string
+              },
+              {
+                getFormattedString: (row) => row.description,
+                id: 'description',
+                label: 'Description',
+                type: ColumnType.string
+              }
+            ]}
+            rows={data}
+          />
+        </DataTable>
+      </Box>
+    )
+  });
+};
+
+describe('DataTable: Grid', () => {
+  it('displays items with title and description only', () => {
+    initializeDataTableGrid({
+      canDelete: false,
+      hasActions: false,
+      hasCardAction: false
+    });
+
+    data.forEach(({ title, description }) => {
+      cy.contains(title).should('be.visible');
+      cy.contains(description).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with actions', () => {
+    initializeDataTableGrid({
+      canDelete: false,
+      hasActions: true,
+      hasCardAction: false
+    });
+
+    cy.findAllByLabelText('edit access rights').should('have.length', 5);
+    cy.findAllByLabelText('edit').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with delete action', () => {
+    initializeDataTableGrid({
+      canDelete: true,
+      hasActions: true,
+      hasCardAction: false
+    });
+
+    cy.findAllByLabelText('delete').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action only', () => {
+    initializeDataTableGrid({
+      canDelete: false,
+      hasActions: false,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action and bottom actions', () => {
+    initializeDataTableGrid({
+      canDelete: true,
+      hasActions: true,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+    cy.findAllByLabelText('delete').should('have.length', 5);
+    cy.findAllByLabelText('edit access rights').should('have.length', 5);
+    cy.findAllByLabelText('edit').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('DataTable: Empty', () => {
+  it('displays the title', () => {
+    initializeDataTableEmpty();
+
+    cy.contains('Welcome').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title and the action button', () => {
+    initializeDataTableEmpty(true);
+
+    cy.contains('Welcome').should('be.visible');
+    cy.contains('Create').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('DataTable: Listing', () => {
+  it('displays the listing', () => {
+    initializeDataTableListing();
+
+    data.forEach(({ title, description }) => {
+      cy.contains(title).should('be.visible');
+      cy.contains(description).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+});