add confirm dialog

src/layers/ConfirmDialog/ConfirmDialog.story.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { ConfirmDialog, ConfirmDialogProps } from './ConfirmDialog';
+
+export default {
+  title: 'Components/Layers/Confirmation Dialog',
+  component: ConfirmDialog,
+  argTypes: {
+    header: { control: 'text' },
+    description: { control: 'text' },
+    confirmLabel: { control: 'text' },
+    cancelLabel: { control: 'text' },
+    onConfirm: { action: 'confirmed' },
+    onCancel: { action: 'cancelled' }
+  }
+} as Meta;
+
+const Template: StoryFn<ConfirmDialogProps> = args => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <ConfirmDialog
+      {...args}
+      open={isOpen}
+      onConfirm={() => {
+        args.onConfirm();
+        setIsOpen(false);
+      }}
+      onCancel={() => {
+        args.onCancel();
+        setIsOpen(false);
+      }}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  header: 'Confirm Action',
+  description: 'Are you sure you want to proceed?',
+  confirmLabel: 'Confirm',
+  cancelLabel: 'Cancel'
+};

src/layers/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,40 @@
+// ConfirmDialog.tsx
+import React, { ReactNode } from 'react';
+import { Dialog } from '@/layers/Dialog';
+import { Button } from '@/elements/Button';
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  header: string | ReactNode;
+  description: string | ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  open,
+  header,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel
+}) => (
+  <Dialog open={open} onClose={onCancel} header={header}>
+    {() => (
+      <>
+        <p className="mb-6">{description}</p>
+        <footer className="flex justify-end space-x-4">
+          <Button className="px-4 py-2" onClick={onConfirm} color="primary">
+            {confirmLabel}
+          </Button>
+          <Button className="px-4 py-2" onClick={onCancel}>
+            {cancelLabel}
+          </Button>
+        </footer>
+      </>
+    )}
+  </Dialog>
+);

src/layers/ConfirmDialog/index.ts

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

src/layers/ConfirmDialog/useConfirmDialog.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useCallback, ReactNode } from 'react';
+import { ConfirmDialog } from './ConfirmDialog';
+
+interface OpenConfirmDialogProps {
+  header: ReactNode | string;
+  description: ReactNode | string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel?: () => void;
+}
+
+export const useConfirmDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dialogProps, setDialogProps] = useState<OpenConfirmDialogProps | null>(
+    null
+  );
+
+  const closeDialog = useCallback(() => {
+    setIsOpen(false);
+    setDialogProps(null);
+  }, []);
+
+  const openConfirmDialog = useCallback(
+    (props: OpenConfirmDialogProps) => {
+      setDialogProps({
+        ...props,
+        onCancel: props.onCancel || closeDialog
+      });
+      setIsOpen(true);
+    },
+    [closeDialog]
+  );
+
+  const DialogComponent = useCallback(() => {
+    if (!dialogProps) {
+      return null;
+    }
+
+    return <ConfirmDialog open={isOpen} {...dialogProps} />;
+  }, [isOpen, dialogProps]);
+
+  return {
+    openConfirmDialog,
+    closeDialog,
+    DialogComponent
+  };
+};