@centreon/ui 24.9.4 → 24.9.6

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 { 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 ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Typography
-} from '@mui/material';
-
-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/CopyCommand/CopyCommand.cypress.spec.tsx

@@ -1,155 +0,0 @@
-import { ThemeMode, userAtom } from '@centreon/ui-context';
-import { mount } from 'cypress/react18';
-import { Provider, createStore } from 'jotai';
-import SnackbarProvider from '../../Snackbar/SnackbarProvider';
-import ThemeProvider from '../../ThemeProvider';
-import CopyCommand, { CopyCommandProps } from './CopyCommand';
-
-const initialize = (props: CopyCommandProps & { theme?: ThemeMode }): void => {
-  const store = createStore();
-  store.set(userAtom, { themeMode: props.theme || ThemeMode.light });
-  mount(
-    <Provider store={store}>
-      <ThemeProvider>
-        <SnackbarProvider>
-          <CopyCommand {...props} />
-        </SnackbarProvider>
-      </ThemeProvider>
-    </Provider>
-  );
-};
-
-describe('CopyCommand', () => {
-  it('displays bash code when props are set', () => {
-    initialize({
-      text: `# a simple command
-echo "hello" | grep "hel"`,
-      language: 'bash',
-      commandToCopy: 'echo "hello" | grep "hel"'
-    });
-
-    cy.contains('# a simple command').should('be.visible');
-    cy.contains('echo').should('be.visible');
-    cy.contains('bash').should('be.visible');
-    cy.findByTestId('Copy command').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays yaml code when props are set', () => {
-    initialize({
-      text: `key:
-  with:
-    input: "input"`,
-      language: 'yaml',
-      commandToCopy: 'echo "hello" | grep "hel"'
-    });
-
-    cy.contains('key').should('be.visible');
-    cy.contains('"input"').should('be.visible');
-    cy.contains('yaml').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays php code when props are set', () => {
-    initialize({
-      text: `<?php
-echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
-?>`,
-      language: 'php',
-      commandToCopy: 'echo "hello" | grep "hel"'
-    });
-
-    cy.contains('echo').should('be.visible');
-    cy.contains('"name"').should('be.visible');
-    cy.contains('php').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays json code when props are set', () => {
-    initialize({
-      text: `{
-  "number": 1,
-  "boolean": true,
-  "array": [
-    {
-      "string": "text"
-    }
-  ]
-}`,
-      language: 'json',
-      commandToCopy: 'echo "hello" | grep "hel"'
-    });
-
-    cy.contains('"number"').should('be.visible');
-    cy.contains('true').should('be.visible');
-    cy.contains('json').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the copy button when the corresponding prop is not passed', () => {
-    initialize({
-      text: `{
-  "number": 1,
-  "boolean": true,
-  "array": [
-    {
-      "string": "text"
-    }
-  ]
-}`,
-      language: 'json'
-    });
-
-    cy.findByTestId('Copy command').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the highlighted code in dark mode when the theme is changed', () => {
-    initialize({
-      text: `{
-  "number": 1,
-  "boolean": true,
-  "array": [
-    {
-      "string": "text"
-    }
-  ]
-}`,
-      language: 'json',
-      theme: ThemeMode.dark
-    });
-
-    cy.get('.hljs-keyword').should('have.css', 'color', 'rgb(255, 123, 114)');
-
-    cy.makeSnapshot();
-  });
-
-  it('copies the command to the clipboard when the button is clicked', () => {
-    initialize({
-      text: `# a simple command
-echo "hello" | grep "hel"`,
-      language: 'bash',
-      commandToCopy: 'echo "hello" | grep "hel"'
-    });
-
-    cy.window()
-      .its('navigator.clipboard')
-      .then((clipboard) => {
-        cy.spy(clipboard, 'writeText').as('writeText');
-      });
-
-    cy.findByTestId('Copy command').click();
-
-    cy.get('@writeText').should(
-      'have.been.calledOnceWith',
-      'echo "hello" | grep "hel"'
-    );
-
-    cy.makeSnapshot();
-  });
-});