@centreon/ui 24.5.12 → 24.5.13

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

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+
+import { useAtom, PrimitiveAtom } 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

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

@@ -0,0 +1,96 @@
+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: '604px',
+      width: '604px'
+    },
+    '&[data-size="medium"] .MuiDialog-paper': {
+      width: '520px'
+    },
+    '&[data-size="small"] .MuiDialog-paper': {
+      width: '400px'
+    },
+    '&[data-size="xlarge"] .MuiDialog-paper': {
+      maxWidth: '1400px',
+      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

@@ -0,0 +1,79 @@
+import React, { ReactElement } from 'react';
+
+import { equals } from 'ramda';
+
+import { Dialog as MuiDialog, Slide } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-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

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

@@ -0,0 +1,15 @@
+import React, { 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

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

package/src/components/Modal/index.ts

@@ -0,0 +1,14 @@
+import { Modal as ModalRoot } from './Modal';
+import { ModalHeader } from './ModalHeader';
+import { ModalBody } from './ModalBody';
+import { ModalActions } from './ModalActions';
+
+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

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

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

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

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

@@ -0,0 +1,70 @@
+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();
+  });
+});

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Typography } from '@mui/material';
+
+import { TabPanel } from './TabPanel';
+
+import { Tabs } from '.';
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+const generateTabs = (size: number): Array<{ label: string; value: string }> =>
+  Array(size)
+    .fill(0)
+    .map((_, index) => ({ label: `Tab ${index}`, value: `tab ${index}` }));
+
+export const Default: Story = {
+  args: {
+    defaultTab: 'tab 0',
+    tabs: generateTabs(2)
+  },
+  render: (args) => (
+    <Tabs {...args}>
+      {generateTabs(2).map(({ value, label }) => (
+        <TabPanel key={value} value={value}>
+          <Typography>{label}</Typography>
+        </TabPanel>
+      ))}
+    </Tabs>
+  )
+};
+
+export const WithTabListProps: Story = {
+  args: {
+    defaultTab: 'tab 0',
+    tabList: {
+      textColor: 'inherit',
+      variant: 'fullWidth'
+    },
+    tabs: generateTabs(2)
+  },
+  render: (args) => (
+    <Tabs {...args}>
+      {generateTabs(2).map(({ value, label }) => (
+        <TabPanel key={value} value={value}>
+          <Typography>{label}</Typography>
+        </TabPanel>
+      ))}
+    </Tabs>
+  )
+};