@centreon/ui 24.7.2 → 24.7.4

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

@@ -1,38 +0,0 @@
-/**
- * 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

@@ -1,23 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

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

@@ -1,34 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

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

package/src/components/Button/index.ts

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

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

@@ -1,76 +0,0 @@
-import { CollapsibleItem, Props } from './CollapsibleItem';
-
-const title = 'Title';
-
-const customizedTitle = <div>Customized title</div>;
-
-const initialize = (props: Omit<Props, 'children'>): void => {
-  cy.mount({
-    Component: <CollapsibleItem {...props}>Content</CollapsibleItem>
-  });
-};
-
-describe('CollapsibleItem', () => {
-  it('displays the component collapsed by default', () => {
-    initialize({ title });
-
-    cy.contains(title).should('be.visible');
-    cy.contains('Content').should('not.be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component expanded when the corresponding prop is set to true', () => {
-    initialize({ defaultExpanded: true, title });
-
-    cy.contains(title).should('be.visible');
-    cy.contains('Content').should('be.visible');
-    cy.get('div[aria-expanded="true"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays a customized title', () => {
-    initialize({ title: customizedTitle });
-
-    cy.contains('Customized title').should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component as compact', () => {
-    initialize({ compact: true, title });
-
-    cy.contains(title).should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-    cy.get('div[data-compact="true"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component as compact and expanded when the icon is clicked', () => {
-    initialize({ compact: true, title });
-
-    cy.contains(title).should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-
-    cy.get('div[aria-expanded="false"]').click();
-
-    cy.get('div[aria-expanded="true"]').should('exist');
-    cy.contains('Content').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component as compact and a customized title', () => {
-    initialize({ compact: true, title: customizedTitle });
-
-    cy.contains('Customized title').should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-    cy.get('div[data-compact="true"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-});

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

@@ -1,51 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Checkbox, Typography } from '@mui/material';
-
-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'
-  }
-};
-
-export const customizedTitle: Story = {
-  args: {
-    children: 'Label',
-    defaultExpanded: false,
-    title: <Typography>Title</Typography>
-  }
-};
-
-export const customizedTitleAndCompact: Story = {
-  args: {
-    children: 'Label',
-    compact: true,
-    defaultExpanded: false,
-    title: (
-      <div
-        style={{ alignItems: 'center', display: 'flex', flexDirection: 'row' }}
-      >
-        <Checkbox size="small" />
-        <Typography>Title compact</Typography>
-      </div>
-    )
-  }
-};

package/src/components/CollapsibleItem/CollapsibleItem.tsx

@@ -1,76 +0,0 @@
-import { ReactNode } from 'react';
-
-import { equals, type } from 'ramda';
-
-import {
-  AccordionDetails,
-  AccordionSummary,
-  Accordion,
-  Typography
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-import { useCollapsibleItemStyles } from './useCollapsibleItemStyles';
-
-export interface Props {
-  children: ReactNode;
-  compact?: boolean;
-  dataTestId?: string;
-  defaultExpanded?: boolean;
-  title: string | JSX.Element;
-}
-
-export const CollapsibleItem = ({
-  title,
-  children,
-  defaultExpanded,
-  compact = false,
-  dataTestId = ''
-}: Props): JSX.Element => {
-  const { classes, cx } = useCollapsibleItemStyles();
-
-  const isStringTitle = equals(type(title), 'String');
-
-  return (
-    <Accordion
-      disableGutters
-      className={classes.accordion}
-      data-compact={compact}
-      data-testid={`${dataTestId}-accordion`}
-      defaultExpanded={defaultExpanded}
-    >
-      <div className={classes.summaryContainer}>
-        <div className={classes.customTitle}>{!isStringTitle && title}</div>
-        <AccordionSummary
-          classes={{
-            content: cx(
-              compact
-                ? classes.accordionSummaryCompactContent
-                : classes.accordionSummary
-            ),
-            root: cx(
-              compact
-                ? classes.accordionSummaryCompactRoot
-                : classes.accordionSummaryRoot
-            )
-          }}
-          data-testid={`${dataTestId}-summary`}
-          expandIcon={<ExpandMoreIcon color="primary" />}
-        >
-          {isStringTitle && (
-            <Typography color="primary" variant="h6">
-              {title}
-            </Typography>
-          )}
-        </AccordionSummary>
-      </div>
-      <AccordionDetails
-        className={cx(
-          compact ? classes.accordionDetailsCompact : classes.accordionDetails
-        )}
-      >
-        {children}
-      </AccordionDetails>
-    </Accordion>
-  );
-};

package/src/components/CollapsibleItem/index.ts

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

package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts

@@ -1,38 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useCollapsibleItemStyles = makeStyles()((theme) => ({
-  accordion: {
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    width: '100%'
-  },
-  accordionDetails: {
-    padding: theme.spacing(0, 2, 2)
-  },
-  accordionDetailsCompact: {
-    padding: theme.spacing(0)
-  },
-  accordionSummary: {
-    margin: theme.spacing(1.5, 0)
-  },
-  accordionSummaryCompactContent: {
-    margin: theme.spacing(0, 0, 0.5)
-  },
-  accordionSummaryCompactRoot: {
-    minHeight: theme.spacing(1),
-    width: '100%'
-  },
-  accordionSummaryRoot: {
-    width: '100%'
-  },
-  customTitle: {
-    whiteSpace: 'nowrap'
-  },
-  summaryContainer: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%'
-  }
-}));

package/src/components/DataTable/DataListing.tsx

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