@centreon/ui 24.9.4 → 24.9.6

package/src/components/CopyCommand/CopyCommand.stories.tsx

@@ -1,54 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import CopyCommand from './CopyCommand';
-
-const meta: Meta<typeof CopyCommand> = {
-  component: CopyCommand
-};
-
-export default meta;
-type Story = StoryObj<typeof CopyCommand>;
-
-export const Default: Story = {
-  args: {
-    text: 'key:\n    with:\n        input: "heyyy"',
-    language: 'yaml'
-  }
-};
-
-export const OneLine: Story = {
-  args: {
-    text: 'echo "hello" | grep "hel"',
-    language: 'bash'
-  }
-};
-
-export const WithCopyCommandIcon: Story = {
-  args: {
-    text: `# a simple command
-echo "hello" | grep "hel"`,
-    language: 'bash',
-    commandToCopy: 'echo "hello" | grep "hel"'
-  }
-};
-
-export const UsingJson: Story = {
-  args: {
-    text: `{
-  "number": 1,
-  "boolean": true,
-  "array": [
-    {
-      "string": "text"
-    }
-  ]
-}`,
-    language: 'json'
-  }
-};
-
-export const UsingPhp: Story = {
-  args: {
-    text: "<?php echo '<p>Hello World</p>'; ?>",
-    language: 'php'
-  }
-};

package/src/components/CopyCommand/CopyCommand.styles.tsx

@@ -1,93 +0,0 @@
-import { ThemeMode } from '@centreon/ui-context';
-import { Theme } from '@mui/material';
-import { equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-const isDarkMode = (theme: Theme): boolean => {
-  return equals(theme.palette.mode, ThemeMode.dark);
-};
-
-export const useCopyCommandStyle = makeStyles()((theme) => ({
-  code: {
-    background: theme.palette.background.default,
-    padding: theme.spacing(1.5),
-    borderRadius: theme.shape.borderRadius
-  },
-  codeContainer: {
-    position: 'relative'
-  },
-  languageChip: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
-    background: theme.palette.background.listingHeader,
-    color: theme.palette.common.white,
-    padding: `0px ${theme.spacing(0.5)}`,
-    fontSize: theme.typography.body2.fontSize
-  },
-  copyButton: {
-    position: 'absolute',
-    top: theme.spacing(0.5),
-    right: theme.spacing(6),
-    opacity: 0.8,
-    '&:hover': {
-      opacity: 1
-    }
-  },
-  highlight: {
-    '.hljs': {
-      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e'
-    },
-    '.hljs-doctag, .hljs-keyword, .hljs-meta, .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_':
-      {
-        color: isDarkMode(theme) ? '#ff7b72' : '#d73a49'
-      },
-    '.hljs-title, .hljs-title.class,_ .hljs-title.class_.inherited,__ .hljs-title.function_':
-      {
-        color: isDarkMode(theme) ? '#d2a8ff' : '#6f42c1'
-      },
-    '.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id':
-      {
-        color: isDarkMode(theme) ? '#79c0ff' : '#005cc5'
-      },
-    '.hljs-regexp, .hljs-string, .hljs-meta, .hljs-string': {
-      color: isDarkMode(theme) ? '#a5d6ff' : '#032f62'
-    },
-    '.hljs-built_in, .hljs-symbol': {
-      color: isDarkMode(theme) ? '#ffa657' : '#e36209'
-    },
-    '.hljs-code, .hljs-comment, .hljs-formula': {
-      color: isDarkMode(theme) ? '#8b949e' : '#6a737d'
-    },
-    '.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo': {
-      color: isDarkMode(theme) ? '#7ee787' : '#22863a'
-    },
-    '.hljs-subst': {
-      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e'
-    },
-    '.hljs-section': {
-      color: isDarkMode(theme) ? '#1f6feb' : '#005cc5',
-      fontWeight: theme.typography.fontWeightBold
-    },
-    '.hljs-bullet': {
-      color: isDarkMode(theme) ? '#f2cc60' : '#735c0f'
-    },
-    '.hljs-emphasis': {
-      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e',
-      fontStyle: 'italic'
-    },
-    '.hljs-strong': {
-      color: isDarkMode(theme) ? '#c9d1d9' : '#24292e',
-      fontWeight: theme.typography.fontWeightBold
-    },
-    '.hljs-addition': {
-      color: isDarkMode(theme) ? '#aff5b4' : '#22863a'
-    },
-    '.hljs-deletion': {
-      color: isDarkMode(theme) ? '#ffdcd7' : '#b31d28'
-    },
-    '.hljs-char.escape_, .hljs-link, .hljs-params, .hljs-property, .hljs-punctuation, .hljs-tag':
-      {}
-  }
-}));

package/src/components/CopyCommand/CopyCommand.tsx

@@ -1,80 +0,0 @@
-import hljs from 'highlight.js/lib/core';
-
-import bash from 'highlight.js/lib/languages/bash';
-import json from 'highlight.js/lib/languages/json';
-import php from 'highlight.js/lib/languages/php';
-import yaml from 'highlight.js/lib/languages/yaml';
-
-import ContentCopy from '@mui/icons-material/ContentCopy';
-import parse from 'html-react-parser';
-import { useTranslation } from 'react-i18next';
-import { useCopyToClipboard } from '../../utils';
-import { IconButton } from '../Button';
-import { useCopyCommandStyle } from './CopyCommand.styles';
-import {
-  labelCommandCopied,
-  labelFailedToCopyCommand
-} from './translatedLabels';
-
-hljs.registerLanguage('bash', bash);
-hljs.registerLanguage('shell', bash);
-hljs.registerLanguage('yaml', yaml);
-hljs.registerLanguage('yml', yaml);
-hljs.registerLanguage('json', json);
-hljs.registerLanguage('php', php);
-
-hljs.addPlugin({
-  'after:highlight': (result) => {
-    const leadingSpaces = result.value.match(/\n\s+/g);
-
-    leadingSpaces?.forEach((leadingSpace) => {
-      const sanitizedLeadingSpace = leadingSpace.replace(/\s/g, ' ');
-      result.value = result.value.replace(
-        leadingSpace,
-        `\n${sanitizedLeadingSpace}`
-      );
-    });
-  }
-});
-
-export interface CopyCommandProps {
-  text: string;
-  commandToCopy?: string;
-  language: string;
-}
-
-const CopyCommand = ({ text, commandToCopy, language }: CopyCommandProps) => {
-  const { t } = useTranslation();
-  const { classes, cx } = useCopyCommandStyle();
-
-  const { copy } = useCopyToClipboard({
-    successMessage: t(labelCommandCopied),
-    errorMessage: t(labelFailedToCopyCommand)
-  });
-
-  const copyCommand = (): Promise<void> | undefined | '' =>
-    commandToCopy && copy(commandToCopy);
-
-  const highlightedText = hljs.highlight(text, { language }).value;
-
-  return (
-    <div className={classes.codeContainer}>
-      <pre className={cx(classes.code, classes.highlight)}>
-        {parse(`${highlightedText}`)}
-      </pre>
-      <div className={classes.languageChip}>{language}</div>
-      {commandToCopy && (
-        <IconButton
-          data-testid="Copy command"
-          variant="ghost"
-          className={classes.copyButton}
-          icon={<ContentCopy fontSize="small" />}
-          size="small"
-          onClick={copyCommand}
-        />
-      )}
-    </div>
-  );
-};
-
-export default CopyCommand;

package/src/components/CopyCommand/translatedLabels.ts

@@ -1,2 +0,0 @@
-export const labelCommandCopied = 'Command copied';
-export const labelFailedToCopyCommand = 'Failed to copy command';

package/src/components/DataTable/DataListing.tsx

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

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

@@ -1,174 +0,0 @@
-import Delete from '@mui/icons-material/Delete';
-import { Box } from '@mui/material';
-
-import { IconButton } from '../..';
-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 CardActions = (): JSX.Element => {
-  return (
-    <IconButton ariaLabel="Delete" title="Delete" onClick={cy.stub()}>
-      <Delete fontSize="small" />
-    </IconButton>
-  );
-};
-
-const initializeDataTableGrid = ({ hasActions, hasCardAction }): void => {
-  cy.viewport(1200, 590);
-  cy.mount({
-    Component: (
-      <DataTable variant="grid">
-        {data.map(({ title, description }) => (
-          <DataTable.Item
-            Actions={<CardActions />}
-            description={description}
-            hasActions={hasActions}
-            hasCardAction={hasCardAction}
-            key={title}
-            title={title}
-          />
-        ))}
-      </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({
-      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({
-      hasActions: true,
-      hasCardAction: false
-    });
-
-    cy.findAllByLabelText('Delete').should('have.length', 5);
-
-    cy.makeSnapshot();
-  });
-
-  it('displays items with card action only', () => {
-    initializeDataTableGrid({
-      hasActions: false,
-      hasCardAction: true
-    });
-
-    cy.findAllByLabelText('view').should('have.length', 5);
-
-    cy.makeSnapshot();
-  });
-
-  it('displays items with card action and bottom actions', () => {
-    initializeDataTableGrid({
-      hasActions: true,
-      hasCardAction: true
-    });
-
-    cy.findAllByLabelText('view').should('have.length', 5);
-    cy.findAllByLabelText('Delete').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();
-  });
-});

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

@@ -1,94 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Box } from '@mui/material';
-
-import { ColumnType } from '../../Listing/models';
-
-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-${
-              // biome-ignore lint/suspicious/noArrayIndexKey:
-              i
-            }`}
-            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>
-  )
-};
-
-const ListingTemplate = (args): JSX.Element => (
-  <Box sx={{ height: '80vh' }}>
-    <DataTable {...args} />
-  </Box>
-);
-
-export const listing: Story = {
-  args: {
-    children: (
-      <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={[...Array(5)].map((_, i) => ({
-          description: `Item description ${i}`,
-          id: i,
-          title: `Item ${i}`
-        }))}
-      />
-    ),
-    variant: 'listing'
-  },
-  render: ListingTemplate
-};

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

@@ -1,30 +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="listing"]': {
-      height: '100%'
-    },
-    '&[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 { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './DataTable.styles';
-
-type DataTableProps = {
-  children?: ReactNode | Array<ReactNode>;
-  isEmpty?: boolean;
-  variant: 'grid' | 'listing';
-};
-
-/** *
- * @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 { 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
-  }
-};