feat(queryBuilder): add query-builder component (#3318)

* feat(queryBuilder): add query-builder component

* fix: style order

* style: add cx, change paddings

* chore: remove unused style

* fix: fix style order, add more typechecks

packages/core/src/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.tsx

@@ -0,0 +1,65 @@
+import {
+  HvButton,
+  HvDialog,
+  HvDialogActions,
+  HvDialogContent,
+  HvDialogTitle,
+} from "@core/components";
+import { ClassNames } from "@emotion/react";
+
+export interface ConfirmationDialogProps {
+  title?: string;
+  message?: string;
+  isOpen?: boolean;
+  onConfirm?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;
+  onCancel?: () => void;
+  confirmButtonLabel?: string;
+  cancelButtonLabel?: string;
+  closeButtonTooltip?: string;
+}
+
+export const ConfirmationDialog = ({
+  title,
+  message,
+  isOpen,
+  onConfirm,
+  onCancel,
+  confirmButtonLabel,
+  cancelButtonLabel,
+  closeButtonTooltip,
+}: ConfirmationDialogProps) => {
+  const handleClose = (event, reason) => {
+    if (reason !== "backdropClick") {
+      onCancel?.();
+    }
+  };
+
+  return (
+    <ClassNames>
+      {({ css }) => (
+        <HvDialog
+          classes={{ paper: css({ width: 500 }) }}
+          open={isOpen}
+          onClose={handleClose}
+          firstFocusable="confirmation-dialog-cancel"
+          buttonTitle={closeButtonTooltip}
+        >
+          <HvDialogTitle variant="warning">{title}</HvDialogTitle>
+          <HvDialogContent indentContent>{message}</HvDialogContent>
+          <HvDialogActions>
+            <HvButton variant="primaryGhost" onClick={onConfirm}>
+              {confirmButtonLabel}
+            </HvButton>
+            <HvButton
+              id="confirmation-dialog-cancel"
+              variant="primaryGhost"
+              onClick={() => onCancel?.()}
+            >
+              {cancelButtonLabel}
+            </HvButton>
+          </HvDialogActions>
+        </HvDialog>
+      )}
+    </ClassNames>
+  );
+};

packages/core/src/components/QueryBuilder/ConfirmationDialog/index.ts

@@ -0,0 +1 @@
+export * from "./ConfirmationDialog";