@centreon/ui 24.11.13 → 24.11.14

package/src/components/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -1,87 +0,0 @@
-import { useMemo } from 'react';
-
-import { PrimitiveAtom, useAtom } from 'jotai';
-import { equals, pick, type } from 'ramda';
-
-import { Modal } from '..';
-
-export interface ConfirmationModalProps<TAtom> {
-  atom: PrimitiveAtom<string | null>;
-  disabled?: boolean;
-  hasCloseButton?: boolean;
-  isDanger?: boolean;
-  labels: {
-    cancel: string | ((atom: Awaited<TAtom> | null) => string);
-    confirm: string | ((atom: Awaited<TAtom> | null) => string);
-    description: string | ((atom: Awaited<TAtom> | null) => string);
-    title: string | ((atom: Awaited<TAtom> | null) => string);
-  };
-  onCancel?: (atomData: Awaited<TAtom> | null) => void;
-  onClose?: (atomData: Awaited<TAtom> | null) => void;
-  onConfirm?: (atomData: Awaited<TAtom> | null) => void;
-}
-
-interface GetLabelProps<TAtom> {
-  atomData: Awaited<TAtom> | null;
-  label: string | ((atom: Awaited<TAtom> | null) => string);
-}
-
-const getLabel = <TAtom,>({ label, atomData }: GetLabelProps<TAtom>): string =>
-  equals(type(label), 'String')
-    ? (label as string)
-    : (label as (atom: Awaited<TAtom> | null) => string)(atomData);
-
-export const ConfirmationModal = <TAtom,>({
-  atom,
-  labels,
-  onConfirm,
-  onCancel,
-  onClose,
-  hasCloseButton = true,
-  isDanger,
-  disabled
-}: ConfirmationModalProps<TAtom>): JSX.Element => {
-  const [atomData, setAtomData] = useAtom<TAtom | null>(atom);
-
-  const closeModal = (): void => {
-    onClose?.(atomData);
-    setAtomData(null);
-  };
-
-  const formattedLabels = useMemo(() => {
-    return {
-      cancel: getLabel({ atomData, label: labels.cancel }),
-      confirm: getLabel({ atomData, label: labels.confirm }),
-      description: getLabel({ atomData, label: labels.description }),
-      title: getLabel({ atomData, label: labels.title })
-    };
-  }, [labels, atomData]);
-
-  const confirm = (): void => {
-    onConfirm?.(atomData);
-    setAtomData(null);
-  };
-
-  const cancel = (): void => {
-    onCancel?.(atomData);
-    setAtomData(null);
-  };
-
-  return (
-    <Modal
-      hasCloseButton={hasCloseButton}
-      open={Boolean(atomData)}
-      onClose={closeModal}
-    >
-      <Modal.Header>{formattedLabels.title}</Modal.Header>
-      <Modal.Body>{formattedLabels.description}</Modal.Body>
-      <Modal.Actions
-        disabled={disabled}
-        isDanger={isDanger}
-        labels={pick(['confirm', 'cancel'], formattedLabels)}
-        onCancel={cancel}
-        onConfirm={confirm}
-      />
-    </Modal>
-  );
-};

package/src/components/Modal/Modal.stories.tsx

@@ -1,142 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '../Button';
-
-import { Modal } from '.';
-
-const meta: Meta<typeof Modal> = {
-  argTypes: {
-    size: {
-      control: {
-        type: 'select'
-      },
-      options: ['small', 'medium', 'large', 'xlarge', 'fullscreen']
-    }
-  },
-  component: Modal
-};
-
-export default meta;
-type Story = StoryObj<typeof Modal>;
-
-export const Default: Story = {
-  args: {
-    hasCloseButton: true,
-    open: true,
-    size: 'small'
-  },
-  render: (args) => (
-    <Modal {...args}>
-      <Modal.Header>Modal title</Modal.Header>
-      <Modal.Body>
-        <p>
-          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
-          irure mollit ex aute excepteur eu id cillum.
-        </p>
-      </Modal.Body>
-      <Modal.Actions
-        labels={{
-          cancel: 'Cancel',
-          confirm: 'Confirm'
-        }}
-      />
-    </Modal>
-  )
-};
-
-export const AsDangerAction: Story = {
-  args: {
-    ...Default.args
-  },
-  render: (args) => (
-    <Modal {...args}>
-      <Modal.Body>
-        <Modal.Body>
-          <p>
-            Occaecat consectetur amet <strong>officia magna</strong>. Eu sunt
-            aute duis duis cillum irure mollit ex aute excepteur eu id cillum.
-          </p>
-        </Modal.Body>
-      </Modal.Body>
-      <Modal.Actions
-        isDanger
-        labels={{
-          cancel: 'Cancel',
-          confirm: 'Confirm'
-        }}
-      />
-    </Modal>
-  )
-};
-
-export const WithCustomAction: Story = {
-  args: {
-    ...Default.args
-  },
-  render: (args) => (
-    <Modal {...args}>
-      <Modal.Header>Modal title</Modal.Header>
-      <Modal.Body>
-        <Modal.Body>
-          <p>
-            Occaecat consectetur amet <strong>officia magna</strong>. Eu sunt
-            aute duis duis cillum irure mollit ex aute excepteur eu id cillum.
-          </p>
-        </Modal.Body>
-      </Modal.Body>
-      <Modal.Actions>
-        <Button size="small" variant="primary">
-          OK
-        </Button>
-      </Modal.Actions>
-    </Modal>
-  )
-};
-
-export const AsPassive: Story = {
-  args: {
-    ...Default.args
-  },
-  render: (args) => (
-    <Modal {...args}>
-      <Modal.Header>Modal title</Modal.Header>
-      <Modal.Body>
-        <p>
-          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
-          irure mollit ex aute excepteur eu id cillum.
-        </p>
-      </Modal.Body>
-    </Modal>
-  )
-};
-
-export const fullscreenWithCustomMargins: Story = {
-  args: {
-    fullscreenMargins: {
-      bottom: 20,
-      left: 40,
-      right: 10,
-      top: 90
-    },
-    hasCloseButton: true,
-    open: true,
-    size: 'fullscreen'
-  },
-  render: (args) => (
-    <Modal {...args}>
-      <Modal.Header>Modal title</Modal.Header>
-      <Modal.Body>
-        <p>
-          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
-          irure mollit ex aute excepteur eu id cillum.
-        </p>
-      </Modal.Body>
-      <Modal.Actions
-        labels={{
-          cancel: 'Cancel',
-          confirm: 'Confirm'
-        }}
-      />
-    </Modal>
-  )
-};

package/src/components/Modal/Modal.styles.ts

@@ -1,96 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles<{
-  bottom?: number;
-  left?: number;
-  right?: number;
-  top?: number;
-}>()((theme, props) => ({
-  modal: {
-    '& .MuiDialog-paper': {
-      gap: theme.spacing(2),
-      padding: theme.spacing(2.5)
-    },
-    '&[data-size="fullscreen"]': {
-      zIndex: 0
-    },
-    '&[data-size="fullscreen"] .MuiBackdrop-root': {
-      display: 'none'
-    },
-    '&[data-size="fullscreen"] .MuiDialog-container': {
-      alignItems: 'flex-end',
-      height: '100vh',
-      justifyContent: 'flex-end'
-    },
-    '&[data-size="fullscreen"] .MuiDialog-paper': {
-      bottom: props?.bottom ?? 0,
-      height: 'calc(100vh - 90px)',
-      left: props?.left ?? 0,
-      margin: 0,
-      maxWidth: 'unset',
-      paddingBottom: theme.spacing(8),
-      position: 'absolute',
-      right: props?.right ?? 0,
-      top: props?.top ?? 0,
-      transition: theme.transitions.create('left')
-    },
-    '&[data-size="large"] .MuiDialog-paper': {
-      maxWidth: '704px',
-      width: '704px'
-    },
-    '&[data-size="medium"] .MuiDialog-paper': {
-      width: '520px'
-    },
-    '&[data-size="small"] .MuiDialog-paper': {
-      width: '400px'
-    },
-    '&[data-size="xlarge"] .MuiDialog-paper': {
-      maxWidth: '900px',
-      width: 'calc(100% - 64px)'
-    }
-  },
-  modalActions: {
-    '&[data-fixed="true"]': {
-      background: theme.palette.background.paper,
-      padding: theme.spacing(1, 2.5, 2.5, 0),
-      position: 'fixed',
-      width: '100%'
-    },
-    bottom: 0,
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(2),
-    justifyContent: 'flex-end',
-    padding: theme.spacing(1, 0, 0, 0),
-    right: 0,
-    zIndex: theme.zIndex.modal
-  },
-  modalBody: {
-    '& > p': {
-      '&:first-of-type': {
-        margin: theme.spacing(0, 0, 1, 0)
-      },
-      margin: theme.spacing(1, 0, 1, 0),
-      width: '90%'
-    }
-  },
-  modalCloseButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    svg: {
-      opacity: 0.6
-    },
-    top: theme.spacing(1)
-  },
-  modalHeader: {
-    '& .MuiDialogTitle-root': {
-      padding: theme.spacing(0)
-    },
-    display: 'flex',
-    gap: theme.spacing(2),
-
-    justifyContent: 'space-between'
-  }
-}));
-
-export { useStyles };

package/src/components/Modal/Modal.tsx

@@ -1,79 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { equals } from 'ramda';
-
-import { Close as CloseIcon } from '@mui/icons-material';
-import { Dialog as MuiDialog, Slide } from '@mui/material';
-
-import { AriaLabelingAttributes } from '../../@types/aria-attributes';
-import { IconButton } from '../Button';
-
-import { useStyles } from './Modal.styles';
-
-export type ModalProps = {
-  children: React.ReactNode;
-  fullscreenMargins?: {
-    bottom?: number;
-    left?: number;
-    right?: number;
-    top?: number;
-  };
-  hasCloseButton?: boolean;
-  onClose?: (
-    event: object,
-    reason: 'escapeKeyDown' | 'backdropClick' | 'closeButton'
-  ) => void;
-  open: boolean;
-  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
-} & AriaLabelingAttributes;
-
-/** *
- * @description This component is *WIP* and is not ready for production. Use the default `Dialog` component instead.
- */
-const Modal = ({
-  children,
-  hasCloseButton = true,
-  onClose,
-  open,
-  size = 'small',
-  fullscreenMargins = {
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0
-  },
-  ...attr
-}: ModalProps): ReactElement => {
-  const { classes } = useStyles(fullscreenMargins);
-
-  const isFullscreen = equals(size, 'fullscreen');
-
-  return (
-    <MuiDialog
-      TransitionComponent={isFullscreen ? Slide : undefined}
-      TransitionProps={{
-        direction: 'up'
-      }}
-      className={classes.modal}
-      data-size={size}
-      open={open}
-      onClose={onClose}
-      {...attr}
-    >
-      {hasCloseButton && (
-        <div className={classes.modalCloseButton}>
-          <IconButton
-            aria-label="close"
-            icon={<CloseIcon />}
-            size="small"
-            variant="ghost"
-            onClick={(e) => onClose?.(e, 'closeButton')}
-          />
-        </div>
-      )}
-      {children}
-    </MuiDialog>
-  );
-};
-
-export { Modal };

package/src/components/Modal/ModalActions.tsx

@@ -1,64 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { Button } from '../Button';
-
-import { useStyles } from './Modal.styles';
-
-export type ModalActionsProps = {
-  children?: React.ReactNode;
-  disabled?: boolean;
-  isDanger?: boolean;
-  isFixed?: boolean;
-  labels?: ModalActionsLabels;
-  onCancel?: () => void;
-  onConfirm?: () => void;
-};
-
-export type ModalActionsLabels = {
-  cancel: string;
-  confirm: string;
-};
-
-const ModalActions = ({
-  children,
-  labels,
-  onCancel,
-  onConfirm,
-  isDanger = false,
-  disabled,
-  isFixed
-}: ModalActionsProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.modalActions} data-fixed={isFixed}>
-      {children || (
-        <>
-          <Button
-            aria-label={labels?.cancel}
-            data-testid="cancel"
-            size="small"
-            variant="secondary"
-            onClick={() => onCancel?.()}
-          >
-            {labels?.cancel}
-          </Button>
-          <Button
-            aria-label={labels?.confirm}
-            data-testid="confirm"
-            disabled={disabled}
-            isDanger={isDanger}
-            size="small"
-            type="submit"
-            variant="primary"
-            onClick={() => onConfirm?.()}
-          >
-            {labels?.confirm}
-          </Button>
-        </>
-      )}
-    </div>
-  );
-};
-
-export { ModalActions };

package/src/components/Modal/ModalBody.tsx

@@ -1,15 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './Modal.styles';
-
-export type ModalHeaderProps = {
-  children?: ReactNode;
-};
-
-const ModalBody = ({ children }: ModalHeaderProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <div className={classes.modalBody}>{children}</div>;
-};
-
-export { ModalBody };

package/src/components/Modal/ModalHeader.tsx

@@ -1,26 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
-
-import { useStyles } from './Modal.styles';
-
-export type ModalHeaderProps = {
-  children?: ReactNode;
-};
-
-const ModalHeader = ({
-  children,
-  ...rest
-}: ModalHeaderProps & DialogTitleProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.modalHeader}>
-      <MuiDialogTitle color="primary" {...rest}>
-        {children}
-      </MuiDialogTitle>
-    </div>
-  );
-};
-
-export { ModalHeader };

package/src/components/Modal/index.ts

@@ -1,14 +0,0 @@
-import { Modal as ModalRoot } from './Modal';
-import { ModalActions } from './ModalActions';
-import { ModalBody } from './ModalBody';
-import { ModalHeader } from './ModalHeader';
-
-export { ConfirmationModal } from './ConfirmationModal/ConfirmationModal';
-
-export const Modal = Object.assign(ModalRoot, {
-  Actions: ModalActions,
-  Body: ModalBody,
-  Header: ModalHeader
-});
-
-export type { ModalActionsLabels } from './ModalActions';

package/src/components/README.md

@@ -1,3 +0,0 @@
-# ⚠️ not ready for production
-
-The `components/` folder contains **experimental components** that are not ready for production. 

package/src/components/Tabs/Tab.styles.ts

@@ -1,25 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useTabsStyles = makeStyles()((theme) => ({
-  indicator: {
-    bottom: 'unset'
-  },
-  tab: {
-    '&[aria-selected="true"]': {
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightBold
-    },
-    color: theme.palette.text.primary,
-    fontWeight: theme.typography.fontWeightRegular,
-    marginRight: theme.spacing(2),
-    minHeight: 0,
-    minWidth: 0,
-    padding: theme.spacing(0.5, 0)
-  },
-  tabPanel: {
-    padding: theme.spacing(1, 0, 0)
-  },
-  tabs: {
-    minHeight: theme.spacing(4.5)
-  }
-}));

package/src/components/Tabs/TabPanel.tsx

@@ -1,22 +0,0 @@
-import { TabPanel as MuiTabPanel } from '@mui/lab';
-
-import { useTabsStyles } from './Tab.styles';
-
-type Props = {
-  children: JSX.Element;
-  value: string;
-};
-
-export const TabPanel = ({ children, value }: Props): JSX.Element => {
-  const { classes } = useTabsStyles();
-
-  return (
-    <MuiTabPanel
-      className={classes.tabPanel}
-      data-tabPanel={value}
-      value={value}
-    >
-      {children}
-    </MuiTabPanel>
-  );
-};

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

@@ -1,70 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { TabPanel } from './TabPanel';
-
-import { Tabs } from '.';
-
-const initialize = (withTabListProps = false): void => {
-  cy.mount({
-    Component: (
-      <Tabs
-        defaultTab="tab 0"
-        tabList={
-          withTabListProps
-            ? {
-                variant: 'fullWidth'
-              }
-            : undefined
-        }
-        tabs={[
-          { label: 'Tab 0', value: 'tab 0' },
-          { label: 'Tab 1', value: 'tab 1' }
-        ]}
-      >
-        <TabPanel value="tab 0">
-          <Typography>Tab 0</Typography>
-        </TabPanel>
-        <TabPanel value="tab 1">
-          <Typography>Tab 1</Typography>
-        </TabPanel>
-      </Tabs>
-    )
-  });
-};
-
-describe('Tabs', () => {
-  it('displays tabs and their content when a tab is selected', () => {
-    initialize();
-
-    cy.get('[data-TabPanel="tab 0"]').should('not.have.attr', 'hidden');
-    cy.get('[data-TabPanel="tab 1"]').should('have.attr', 'hidden');
-    cy.findByLabelText('Tab 0')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'true');
-    cy.findByLabelText('Tab 1')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'false');
-
-    cy.contains('Tab 1').click();
-
-    cy.get('[data-TabPanel="tab 0"]').should('have.attr', 'hidden');
-    cy.get('[data-TabPanel="tab 1"]').should('not.have.attr', 'hidden');
-    cy.findByLabelText('Tab 0')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'false');
-    cy.findByLabelText('Tab 1')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'true');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays tabs when tabList props are set', () => {
-    initialize(true);
-
-    cy.get('[data-TabPanel="tab 0"]').should('not.have.attr', 'hidden');
-    cy.get('[data-TabPanel="tab 1"]').should('have.attr', 'hidden');
-
-    cy.makeSnapshot();
-  });
-});