(feat) Implement the drag and drop of questions in the interactive form builder

package.json

@@ -63,6 +63,10 @@
     "rxjs": "6.x"
   },
   "devDependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
     "@openmrs/esm-framework": "next",
     "@openmrs/esm-styleguide": "next",
     "@playwright/test": "^1.35.0",

src/components/interactive-builder/draggable-question.component.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+import { useTranslation } from "react-i18next";
+import { Button } from "@carbon/react";
+import { Edit, Replicate, TrashCan, Draggable } from "@carbon/react/icons";
+import type { Question } from "../../types";
+import styles from "./draggable-question.scss";
+
+type DraggableQuestionProps = {
+  allQuestions: Array<Question>;
+  question: Question;
+  pageIndex: number;
+  sectionIndex: number;
+  questionIndex: number;
+  duplicateQuestion: (
+    question: Question,
+    pageId: number,
+    sectionId: number
+  ) => void;
+  handleEditButtonClick: (question: Question) => void;
+  handleDeleteButtonClick: (question: Question) => void;
+};
+
+export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
+  question,
+  pageIndex,
+  sectionIndex,
+  questionIndex,
+  duplicateQuestion,
+  handleDeleteButtonClick,
+  handleEditButtonClick,
+  allQuestions,
+}) => {
+  const { t } = useTranslation();
+  const draggableId = `question-${pageIndex}-${sectionIndex}-${questionIndex}`;
+
+  const { attributes, listeners, transform, isDragging, setNodeRef } =
+    useDraggable({
+      id: draggableId,
+      disabled: allQuestions.length <= 1,
+    });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  };
+
+  const dragStyles = isDragging ? styles.isDragged : styles.normal;
+
+  return (
+    <div className={dragStyles} style={style}>
+      <div className={styles.iconAndName}>
+        <div
+          className={styles.dragIconContainer}
+          ref={setNodeRef}
+          {...attributes}
+          {...listeners}
+        >
+          <Draggable className={styles.dragIcon} size={16} />
+        </div>
+        <p className={styles.questionLabel}>{question.label}</p>
+      </div>
+      <div className={styles.buttonsContainer}>
+        <Button
+          kind="ghost"
+          size="sm"
+          enterDelayMs={200}
+          iconDescription={t("duplicateQuestion", "Duplicate question")}
+          onClick={() => {
+            if (!isDragging) {
+              duplicateQuestion(question, pageIndex, sectionIndex);
+            }
+          }}
+          renderIcon={(props) => <Replicate size={16} {...props} />}
+          hasIconOnly
+        />
+        <Button
+          kind="ghost"
+          size="sm"
+          enterDelayMs={200}
+          iconDescription={t("editQuestion", "Edit question")}
+          onClick={() => {
+            if (!isDragging) {
+              handleEditButtonClick(question);
+            }
+          }}
+          renderIcon={(props) => <Edit size={16} {...props} />}
+          hasIconOnly
+        />
+        <Button
+          hasIconOnly
+          enterDelayMs={200}
+          iconDescription={t("deleteQuestion", "Delete question")}
+          kind="ghost"
+          onClick={handleDeleteButtonClick}
+          renderIcon={(props) => <TrashCan size={16} {...props} />}
+          size="sm"
+        />
+      </div>
+    </div>
+  );
+};

src/components/interactive-builder/draggable-question.scss

@@ -0,0 +1,51 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.buttonsContainer {
+  display: flex;
+  align-items: center;
+}
+
+.iconAndName {
+  display: flex;
+  align-items: center;
+}
+
+.isDragged, .normal {
+  display: flex;
+  height: 3rem;
+  justify-content: space-between;
+  align-items: center;
+  margin: spacing.$spacing-02 spacing.$spacing-03;
+  width: 100%;
+}
+
+.normal:hover {
+  background-color: $ui-03;
+}
+
+.isDragged {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 255, 255, 0.552);
+}
+
+.dragIconContainer {
+  cursor: pointer;
+  margin-right: spacing.$spacing-03;
+
+
+
+  :hover {
+    background-color: $ui-02;
+  }
+}
+.dragIcon {
+  margin: 0 spacing.$spacing-03;
+  padding: 0.25rem;
+  color: $ui-04;
+  margin-top: 0.2rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.25rem;
+}

src/components/interactive-builder/droppable-container.component.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useDroppable } from "@dnd-kit/core";
+
+type DroppableProps = {
+  id: string;
+  children: React.ReactNode;
+};
+
+export function Droppable({ id, children }: DroppableProps) {
+  const { isOver, setNodeRef } = useDroppable({
+    id: id,
+  });
+
+  const style = {
+    border: `1px solid ${isOver ? "#005d5d" : "transparent"}`,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      {children}
+    </div>
+  );
+}