@centreon/ui 24.4.19 → 24.4.21

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,58 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { IconButton as MuiIconButton } 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;
-
-/**
- * @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.stories.tsx

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

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

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

package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts

@@ -1,15 +0,0 @@
-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/DataTable.stories.tsx

@@ -1,51 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { DataTable } from './index';
-
-const meta: Meta<typeof DataTable> = {
-  component: DataTable
-};
-
-export default meta;
-type Story = StoryObj<typeof DataTable>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        {[...Array(5)].map((_, i) => (
-          <DataTable.Item
-            description={`Item description ${i}`}
-            key={`k-${i}`} // eslint-disable-line react/no-array-index-key
-            title={`Item ${i}`}
-          />
-        ))}
-      </>
-    )
-  }
-};
-
-export const AsEmptyState: Story = {
-  args: {
-    children: (
-      <DataTable.EmptyState
-        labels={{
-          actions: {
-            create: 'Create item'
-          },
-          title: 'No items found'
-        }}
-      />
-    ),
-    isEmpty: true
-  }
-};
-
-export const withFixedHeightContainer: Story = {
-  args: { ...Default.args },
-  render: (args) => (
-    <div style={{ height: '400px' }}>
-      <DataTable {...args} />
-    </div>
-  )
-};

package/src/components/DataTable/DataTable.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  dataTable: {
-    '&[data-variant="grid"]': {
-      '& > *': {
-        width: 'auto'
-      },
-      display: 'grid',
-      gridGap: theme.spacing(2.5),
-      gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(45)})`
-    },
-    '&[data-variant][data-is-empty="true"]': {
-      display: 'flex',
-      justifyContent: 'center',
-      width: '100%'
-    },
-    display: 'flex'
-  },
-  dataTableScrollContainer: {
-    // FIXME the global -webkit-scrollbar styles are not optimal for this component in grid variant
-    height: '100%',
-    overflowY: 'auto'
-  }
-}));
-
-export { useStyles };

package/src/components/DataTable/DataTable.tsx

@@ -1,35 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './DataTable.styles';
-
-type DataTableProps = {
-  children: ReactNode | Array<ReactNode>;
-  isEmpty?: boolean;
-  variant?: 'grid';
-};
-
-/** *
- * @description DataTable component is used to display a list of items.
- * It supports grids (as cards) and tables (as rows) with filtering, pagination, sorting, and other features
- */
-const DataTable = ({
-  children,
-  variant = 'grid',
-  isEmpty = false
-}: DataTableProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.dataTableScrollContainer}>
-      <div
-        className={classes.dataTable}
-        data-is-empty={isEmpty}
-        data-variant={variant}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export { DataTable };

package/src/components/DataTable/EmptyState/DataTableEmptyState.stories.tsx

@@ -1,21 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { DataTableEmptyState } from './DataTableEmptyState';
-
-const meta: Meta<typeof DataTableEmptyState> = {
-  component: DataTableEmptyState
-};
-
-export default meta;
-type Story = StoryObj<typeof DataTableEmptyState>;
-
-export const Default: Story = {
-  args: {
-    labels: {
-      actions: {
-        create: 'Create item'
-      },
-      title: 'No items found'
-    }
-  }
-};

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -1,26 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  actions: {
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  dataTableEmptyState: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(4),
-
-    h2: {
-      color: theme.palette.text.primary,
-      font: 'normal normal 600 34px/36px Roboto',
-      margin: '0'
-    },
-    height: '100%',
-    justifyContent: 'center',
-    minHeight: '30vh',
-    width: '100%'
-  }
-}));
-
-export { useStyles };

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -1,53 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { useTranslation } from 'react-i18next';
-
-import { Add as AddIcon } from '@mui/icons-material';
-import { Typography as MuiTypography } from '@mui/material';
-
-import { Button } from '../../Button';
-
-import { useStyles } from './DataTableEmptyState.styles';
-
-type ListEmptyStateProps = {
-  canCreate?: boolean;
-  labels: {
-    actions?: {
-      create: string;
-    };
-    title: string;
-  };
-  onCreate?: () => void;
-};
-
-const DataTableEmptyState = ({
-  labels,
-  onCreate,
-  canCreate = true
-}: ListEmptyStateProps): ReactElement => {
-  const { classes } = useStyles();
-  const { t } = useTranslation();
-
-  return (
-    <div
-      className={classes.dataTableEmptyState}
-      data-testid="data-table-empty-state"
-    >
-      <MuiTypography variant="h2">{t(labels.title)}</MuiTypography>
-      <div className={classes.actions}>
-        {canCreate && (
-          <Button
-            aria-label="create"
-            icon={<AddIcon />}
-            iconVariant="start"
-            onClick={() => onCreate?.()}
-          >
-            {t(labels.actions?.create || '')}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export { DataTableEmptyState };