feat(redmine 1254620): add confirmModal component

packages/react-front-kit/src/3-custom/Components/ConfirmModal/ConfirmModal.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ConfirmModal as Cmp } from './ConfirmModal';
+
+const meta = {
+  argTypes: {
+    onClick: { action: 'clicked' },
+    opened: { control: 'boolean' },
+  },
+  component: Cmp,
+  tags: ['autodocs'],
+  title: '3-custom/Components/ConfirmModal',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const ConfirmModal: IStory = {
+  args: {
+    cancelColor: 'gray',
+    cancelLabel: 'Annuler',
+    children: 'Êtes-vous certain de vouloir supprimer cet élément ?',
+    confirmColor: 'red',
+    confirmLabel: 'Supprimer',
+    onCancel: () => {
+      // eslint-disable-next-line no-console
+      console.log('onCancel');
+    },
+    onConfirm: () => {
+      // eslint-disable-next-line no-console
+      console.log('onConfirm');
+    },
+    opened: false,
+    title: 'Supprimer ?',
+  },
+};

packages/react-front-kit/src/3-custom/Components/ConfirmModal/ConfirmModal.style.tsx

@@ -0,0 +1,28 @@
+import { createStyles } from '@mantine/styles';
+
+export const useStyles = createStyles(() => ({
+  buttonFilters: { background: 'white', height: '34px', marginRight: '10px' },
+  buttonGrey: {
+    padding: '0.667em 3.333em',
+  },
+  buttonLeftModal: { marginRight: '10px' },
+  buttonRemoveRoot: {
+    padding: '0.667em 3.333em',
+  },
+  modalBody: {
+    padding: '0px',
+  },
+  modalButtonsContainer: {
+    marginTop: '32px',
+  },
+  modalContent: {
+    padding: '48px',
+  },
+  modalHeader: {
+    height: '0px',
+    padding: '0px',
+  },
+  modalTitleContainer: {
+    marginLeft: '12px',
+  },
+}));

packages/react-front-kit/src/3-custom/Components/ConfirmModal/ConfirmModal.test.tsx

@@ -0,0 +1,27 @@
+import { renderWithProviders } from '../../../utils/tests';
+
+import { ConfirmModal } from './ConfirmModal';
+
+describe('ConfirmModal', () => {
+  it('matches snapshot', () => {
+    const { container } = renderWithProviders(
+      <ConfirmModal
+        cancelColor="gray"
+        cancelLabel="Annuler"
+        confirmColor="red"
+        confirmLabel="Supprimer"
+        onCancel={
+          // eslint-disable-next-line no-console
+          () => console.log('onCancel')
+        }
+        onConfirm={
+          // eslint-disable-next-line no-console
+          () => console.log('onConfirm')
+        }
+        opened={false}
+        title="Supprimer ?"
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

packages/react-front-kit/src/3-custom/Components/ConfirmModal/ConfirmModal.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import type { ModalProps } from '@mantine/core';
+import type { ReactElement } from 'react';
+
+import { Button, Modal } from '@mantine/core';
+
+import { useStyles } from './ConfirmModal.style';
+
+interface IConfirmModalProps extends ModalProps {
+  cancelColor?: string;
+  cancelLabel?: string;
+  confirmColor?: string;
+  confirmLabel?: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  title?: string;
+}
+
+export function ConfirmModal(props: IConfirmModalProps): ReactElement {
+  const {
+    cancelColor = 'gray',
+    cancelLabel = 'Cancel',
+    confirmColor = 'red',
+    confirmLabel = 'Confirm',
+    onCancel,
+    onConfirm,
+    children,
+    title,
+    ...modalProps
+  } = props;
+  const { classes } = useStyles();
+  return (
+    <Modal
+      centered
+      classNames={{
+        body: classes.modalBody,
+        content: classes.modalContent,
+        header: classes.modalHeader,
+      }}
+      radius={16}
+      size="lg"
+      {...modalProps}
+    >
+      <>
+        <div className={classes.modalTitleContainer}>
+          {title ? <h2>{title}</h2> : null}
+          {children}
+        </div>
+        <div className={classes.modalButtonsContainer}>
+          <Button
+            className={classes.buttonLeftModal}
+            classNames={{
+              root: classes.buttonGrey,
+            }}
+            color={cancelColor}
+            onClick={onCancel}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            classNames={{
+              root: classes.buttonRemoveRoot,
+            }}
+            color={confirmColor}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </Button>
+        </div>
+      </>
+    </Modal>
+  );
+}

packages/react-front-kit/src/index.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-refresh/only-export-components */
 // component exports
+export * from './3-custom/Components/ConfirmModal/ConfirmModal';
 export * from './1-styleGuide/Icons';
 export * from './3-custom/Components/Breadcrumbs/Breadcrumbs';
 export * from './3-custom/Components/CollapseButton/CollapseButton';