@centreon/ui 23.10.43 → 23.10.44

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/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/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, minmax(280px, 1fr))'
-    },
-    '&[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 };

package/src/components/DataTable/Item/DataTableItem.stories.tsx

@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { DataTableItem } from './DataTableItem';
-
-const meta: Meta<typeof DataTableItem> = {
-  component: DataTableItem
-};
-
-export default meta;
-type Story = StoryObj<typeof DataTableItem>;
-
-export const Default: Story = {
-  args: {
-    description: 'DataTable item description',
-    title: 'DataTable item'
-  }
-};
-
-export const WithActions: Story = {
-  args: {
-    ...Default.args,
-    hasActions: true,
-    hasCardAction: true
-  }
-};

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

@@ -1,39 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  dataTableItem: {
-    '& .MuiCardActionArea-root': {
-      alignItems: 'flex-start',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      justifyContent: 'space-between'
-    },
-    '& .MuiCardActions-root': {
-      '& > span': {
-        display: 'flex',
-        gap: theme.spacing(1)
-      },
-      display: 'flex',
-
-      justifyContent: 'space-between',
-      opacity: 0
-    },
-    '&:hover .MuiCardActions-root': {
-      opacity: 1
-    },
-    borderRadius: theme.shape.borderRadius,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '210px',
-    minWidth: '280px',
-    p: {
-      color: theme.palette.text.secondary,
-      letterSpacing: '0',
-      margin: '0'
-    },
-    width: '320px'
-  }
-}));
-
-export { useStyles };

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -1,102 +0,0 @@
-import React, { forwardRef, ReactElement, RefObject, useMemo } from 'react';
-
-import {
-  Card as MuiCard,
-  CardActionArea as MuiCardActionArea,
-  CardActions as MuiCardActions,
-  CardContent as MuiCardContent,
-  Typography as MuiTypography
-} from '@mui/material';
-import {
-  Delete as DeleteIcon,
-  Settings as SettingsIcon,
-  Share as ShareIcon
-} from '@mui/icons-material';
-
-import { IconButton } from '../../Button';
-
-import { useStyles } from './DataTableItem.styles';
-
-export interface DataTableItemProps {
-  description?: string;
-  hasActions?: boolean;
-  hasCardAction?: boolean;
-  onClick?: () => void;
-  onDelete?: () => void;
-  onEdit?: () => void;
-  onEditAccessRights?: () => void;
-  title: string;
-}
-
-const DataTableItem = forwardRef(
-  (
-    {
-      title,
-      description,
-      hasCardAction = false,
-      hasActions = false,
-      onClick,
-      onEdit,
-      onDelete,
-      onEditAccessRights
-    }: DataTableItemProps,
-    ref
-  ): ReactElement => {
-    const { classes } = useStyles();
-
-    const ActionArea = useMemo(
-      () => (hasCardAction ? MuiCardActionArea : React.Fragment),
-      [hasCardAction]
-    );
-
-    return (
-      <MuiCard
-        className={classes.dataTableItem}
-        data-item-title={title}
-        ref={ref as RefObject<HTMLDivElement>}
-        variant="outlined"
-      >
-        <ActionArea aria-label="view" onClick={() => onClick?.()}>
-          <MuiCardContent>
-            <MuiTypography variant="h5">{title}</MuiTypography>
-            {description && <MuiTypography>{description}</MuiTypography>}
-          </MuiCardContent>
-        </ActionArea>
-        {hasActions && (
-          <MuiCardActions>
-            <span>
-              <IconButton
-                aria-label="delete"
-                data-testid="delete"
-                icon={<DeleteIcon />}
-                size="small"
-                variant="ghost"
-                onClick={() => onDelete?.()}
-              />
-            </span>
-            <span>
-              <IconButton
-                aria-label="edit access rights"
-                data-testid="edit-access-rights"
-                icon={<ShareIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEditAccessRights?.()}
-              />
-              <IconButton
-                aria-label="edit"
-                data-testid="edit"
-                icon={<SettingsIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEdit?.()}
-              />
-            </span>
-          </MuiCardActions>
-        )}
-      </MuiCard>
-    );
-  }
-);
-
-export { DataTableItem };