feat(ConfirmDialog): add dialog confirm component (#169)

Co-authored-by: kseniyakuzina <[email protected]>

CODEOWNERS

@@ -10,4 +10,4 @@
 /src/components/SharePopover @niktverd
 /src/components/StoreBadge @NikitaCG
 /src/components/Stories @darkgenius
-
+/src/components/ConfirmDialog @kseniya57

src/components/ConfirmDialog/ConfirmDialog.scss

@@ -0,0 +1,10 @@
+@use '@gravity-ui/uikit/styles/mixins';
+@use '../../components/variables';
+
+$block: '.#{variables.$ns}confirm-dialog';
+
+#{$block} {
+    &__body {
+        @include mixins.text-body-2;
+    }
+}

src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import type {DialogProps} from '@gravity-ui/uikit';
+import {Dialog, DialogFooterProps} from '@gravity-ui/uikit';
+
+import {block} from '../utils/cn';
+
+import './ConfirmDialog.scss';
+
+const b = block('confirm-dialog');
+
+export type ConfirmDialogProps = {
+    title?: string;
+    message?: React.ReactNode;
+} & Omit<DialogProps, 'children'> &
+    Pick<
+        DialogFooterProps,
+        | 'textButtonApply'
+        | 'textButtonCancel'
+        | 'onClickButtonCancel'
+        | 'onClickButtonApply'
+        | 'propsButtonCancel'
+        | 'propsButtonApply'
+    >;
+
+export const ConfirmDialog = ({
+    title,
+    message,
+    textButtonApply,
+    textButtonCancel,
+    onClickButtonApply,
+    onClickButtonCancel,
+    propsButtonCancel,
+    propsButtonApply,
+    ...dialogProps
+}: ConfirmDialogProps) => {
+    return (
+        <Dialog {...dialogProps}>
+            <Dialog.Header caption={title} />
+            <Dialog.Body className={b('body')}>{message}</Dialog.Body>
+            <Dialog.Footer
+                preset="default"
+                showError={false}
+                listenKeyEnter
+                textButtonApply={textButtonApply}
+                textButtonCancel={textButtonCancel}
+                onClickButtonApply={onClickButtonApply}
+                onClickButtonCancel={onClickButtonCancel}
+                propsButtonCancel={propsButtonCancel}
+                propsButtonApply={propsButtonApply}
+            />
+        </Dialog>
+    );
+};

src/components/ConfirmDialog/README.md

@@ -0,0 +1,60 @@
+<!--GITHUB_BLOCK-->
+
+# ConfirmDialog
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {ConfirmDialog} from '@gravity-ui/components';
+```
+
+`ConfirmDialog` is a utility component, which renders confirmation dialogs
+
+## Properties
+
+| Name                | Description                     |                                              Type                                              | Required |
+| :------------------ | :------------------------------ | :--------------------------------------------------------------------------------------------: | :------: |
+| title               | The confirm dialog title        |                                            `string`                                            |   Yes    |
+| message             | The confirmation message        |                                          `ReactNode`                                           |   Yes    |
+| textButtonCancel    | The cancel button text          |                                            `string`                                            |   Yes    |
+| propsButtonCancel   | The cancel buttonProps          |                                         `ButtonProps`                                          |          |
+| onClickButtonCancel | The cancel button click handler |                  `(event: React.MouseEvent<HTMLElement, MouseEvent>) => void`                  |   Yes    |
+| textButtonApply     | The ok button text              |                                            `string`                                            |   Yes    |
+| propsButtonApply    | The ok button props             |                                         `ButtonProps`                                          |          |
+| onClickButtonApply  | The ok button click handler     |                  `(event: React.MouseEvent<HTMLElement, MouseEvent>) => void`                  |   Yes    |
+| onClose             | The dialog close handler        | `(event: MouseEvent or KeyboardEvent, reason: ModalCloseReason or 'closeButtonClick') => void` |   Yes    |
+
+And other Dialog props
+
+## Usage
+
+```tsx
+import {ConfirmDialog} from '@gravity-ui/components';
+
+const [open, setOpen] = React.useState(false);
+
+return (
+  <React.Fragment>
+    <Button view="normal" onClick={() => setOpen(true)}>
+      Show confirm
+    </Button>
+    <ConfirmDialog
+      {...args}
+      title="Do you want to confirm?"
+      onClickButtonApply={() => {
+        alert('Confirmed');
+        setOpen(false);
+      }}
+      onClickButtonCancel={() => {
+        alert('Cancelled');
+        setOpen(false);
+      }}
+      onClose={() => setOpen(false)}
+      textButtonCancel="No"
+      textButtonApply="Yes"
+      open={open}
+      aria-labelledby="app-confirmation-dialog-title"
+    />
+  </React.Fragment>
+);
+```

src/components/ConfirmDialog/__stories__/ConfirmDialog.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import {Button} from '@gravity-ui/uikit';
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {ConfirmDialog} from '../ConfirmDialog';
+import type {ConfirmDialogProps} from '../ConfirmDialog';
+
+export default {
+    title: 'Components/ConfirmDialog',
+    component: ConfirmDialog,
+} as Meta<ConfirmDialogProps>;
+
+const DefaultTemplate: StoryFn<ConfirmDialogProps> = (args) => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <React.Fragment>
+            <Button view="normal" onClick={() => setOpen(true)}>
+                Show confirm
+            </Button>
+            <ConfirmDialog
+                {...args}
+                onClickButtonApply={() => {
+                    alert('Confirmed');
+                    setOpen(false);
+                }}
+                onClickButtonCancel={() => {
+                    alert('Cancelled');
+                    setOpen(false);
+                }}
+                onClose={() => setOpen(false)}
+                open={open}
+            />
+        </React.Fragment>
+    );
+};
+export const Default = DefaultTemplate.bind({});
+
+Default.args = {
+    title: 'Do you want to confirm?',
+    textButtonCancel: 'No',
+    textButtonApply: 'Yes',
+    'aria-labelledby': 'app-confirmation-dialog-title',
+};

src/components/ConfirmDialog/index.ts

@@ -0,0 +1 @@
+export * from './ConfirmDialog';

src/components/index.ts

@@ -19,3 +19,4 @@ export * from './SharePopover';
 export * from './StoreBadge';
 export * from './Stories';
 export * from './StoriesGroup';
+export * from './ConfirmDialog';