@openmrs/esm-form-builder-app 1.0.0

package/src/components/interactive-builder/interactive-builder.scss

@@ -0,0 +1,100 @@
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  :global(.cds--modal-content:focus) {
+    outline: none;
+  }
+
+  :global(.cds--tooltip) {
+    z-index: 1;
+  }
+}
+
+.helperText {
+  @include type.type-style('body-compact-01');
+  margin: 1rem 0rem;
+}
+
+.heading {
+  @include type.type-style('heading-03');
+  margin: 1rem 0rem 0.5rem;
+}
+
+.styledHeading {
+  @include type.type-style('heading-02');
+  margin: 0.5rem 0rem;
+
+  &:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.subheading {
+  @extend .heading;
+  @include type.type-style('heading-02');
+}
+
+.name {
+  @extend .heading;
+  @include type.type-style('heading-02');
+}
+
+.editableFieldsContainer {
+  margin: 1rem 0;
+  border-bottom: 1px solid $ui-03;
+}
+
+.addQuestionButton {
+  margin: 0.75rem 0;
+}
+
+.header {
+  margin: 2rem 0;
+}
+
+.explainer {
+  margin-bottom: 2rem;
+
+  p {
+    margin: 1.5rem 0;
+
+    &:first-of-type {
+      @include type.type-style('heading-04');
+    }
+  }
+}
+
+.sectionExplainer {
+  margin: 1.5rem 0;
+}
+
+.startButton {
+  margin: 1rem 0;
+}
+
+.editorContainer {
+  display: flex;
+  justify-content: space-between;
+  margin: 0.25rem 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+
+.buttonContainer {
+  span {
+    margin: 0rem 0.5rem;
+  }
+}
+
+.questionLabel {
+  @include type.type-style('body-01');
+}
+
+.addSectionButton {
+  margin: 1.5rem 0;
+}

package/src/components/interactive-builder/new-form-modal.component.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  ComposedModal,
+  Form,
+  FormGroup,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextInput,
+} from "@carbon/react";
+import { showToast, showNotification } from "@openmrs/esm-framework";
+import { Schema } from "../../types";
+
+type NewFormModalProps = {
+  schema: Schema;
+  onSchemaChange: (schema: Schema) => void;
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+};
+
+const NewFormModal: React.FC<NewFormModalProps> = ({
+  schema,
+  onSchemaChange,
+  showModal,
+  onModalChange,
+}) => {
+  const { t } = useTranslation();
+  const [formName, setFormName] = useState("");
+
+  const updateFormName = () => {
+    try {
+      schema.name = formName;
+      onSchemaChange({ ...schema });
+
+      showToast({
+        title: t("success", "Success!"),
+        kind: "success",
+        critical: true,
+        description: t("formCreated", "New form created"),
+      });
+    } catch (error) {
+      showNotification({
+        title: t("errorCreatingForm", "Error creating form"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  return (
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)}>
+      <ModalHeader title={t("createNewForm", "Create a new form")} />
+      <Form onSubmit={(event) => event.preventDefault()}>
+        <ModalBody>
+          <FormGroup legendText={""}>
+            <TextInput
+              id="formName"
+              labelText={t("formName", "Form name")}
+              value={formName}
+              onChange={(event) => setFormName(event.target.value)}
+            />
+          </FormGroup>
+        </ModalBody>
+      </Form>
+      <ModalFooter>
+        <Button kind="secondary" onClick={() => onModalChange(false)}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button
+          disabled={!formName}
+          onClick={() => {
+            updateFormName();
+            onModalChange(false);
+          }}
+        >
+          <span>{t("createForm", "Create Form")}</span>
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+export default NewFormModal;

package/src/components/interactive-builder/page-modal.component.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  ComposedModal,
+  Form,
+  FormGroup,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextInput,
+} from "@carbon/react";
+import { showToast, showNotification } from "@openmrs/esm-framework";
+import { Schema } from "../../types";
+
+type PageModalProps = {
+  schema: Schema;
+  onSchemaChange: (schema: Schema) => void;
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+};
+
+const PageModal: React.FC<PageModalProps> = ({
+  schema,
+  onSchemaChange,
+  showModal,
+  onModalChange,
+}) => {
+  const { t } = useTranslation();
+  const [pageTitle, setPageTitle] = useState("");
+
+  const handleUpdatePageTitle = () => {
+    updatePages();
+    onModalChange(false);
+  };
+
+  const updatePages = () => {
+    try {
+      if (pageTitle) {
+        schema.pages.push({
+          label: pageTitle,
+          sections: [],
+        });
+
+        onSchemaChange({ ...schema });
+        setPageTitle("");
+      }
+      showToast({
+        title: t("success", "Success!"),
+        kind: "success",
+        critical: true,
+        description: t("pageCreated", "New page created"),
+      });
+    } catch (error) {
+      showNotification({
+        title: t("errorCreatingPage", "Error creating page"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  return (
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)}>
+      <ModalHeader title={t("createNewPage", "Create a new page")} />
+      <Form onSubmit={(event) => event.preventDefault()}>
+        <ModalBody>
+          <FormGroup legendText={""}>
+            <TextInput
+              id="pageTitle"
+              labelText={t("enterPageTitle", "Enter a title for your new page")}
+              value={pageTitle}
+              onChange={(event) => setPageTitle(event.target.value)}
+            />
+          </FormGroup>
+        </ModalBody>
+      </Form>
+      <ModalFooter>
+        <Button onClick={() => onModalChange(false)} kind="secondary">
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button disabled={!pageTitle} onClick={handleUpdatePageTitle}>
+          <span>{t("save", "Save")}</span>
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+export default PageModal;

package/src/components/interactive-builder/question-modal.scss

@@ -0,0 +1,35 @@
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.label {
+  margin-bottom: 0.5rem;
+}
+
+.loader {
+  padding: 1rem 0.5rem;
+}
+
+.tag {
+  margin-right: 0.5rem;
+}
+
+.conceptList {
+  max-height: 14rem;
+  overflow-y: auto;
+  border: 1px solid $ui-03;
+  border-top: none;
+}
+
+.conceptList li:hover {
+  background-color: $ui-03;
+}
+
+.concept {
+  padding: 0.75rem;
+}
+
+.emptyResults {
+  @include type.type-style("body-compact-01");
+  color: $text-02;
+  min-height: 1rem;
+}

package/src/components/interactive-builder/section-modal.component.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  ComposedModal,
+  Form,
+  FormGroup,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextInput,
+} from "@carbon/react";
+import { showToast, showNotification } from "@openmrs/esm-framework";
+import { Schema } from "../../types";
+
+type SectionModalProps = {
+  schema: Schema;
+  onSchemaChange: (schema: Schema) => void;
+  pageIndex: number;
+  resetIndices: () => void;
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+};
+
+const SectionModal: React.FC<SectionModalProps> = ({
+  schema,
+  onSchemaChange,
+  pageIndex,
+  resetIndices,
+  showModal,
+  onModalChange,
+}) => {
+  const { t } = useTranslation();
+  const [sectionTitle, setSectionTitle] = useState("");
+
+  const handleUpdatePageSections = () => {
+    updateSections();
+    onModalChange(false);
+  };
+
+  const updateSections = () => {
+    try {
+      schema.pages[pageIndex]?.sections?.push({
+        label: sectionTitle,
+        isExpanded: "true",
+        questions: [],
+      });
+      onSchemaChange({ ...schema });
+      setSectionTitle("");
+      resetIndices();
+
+      showToast({
+        title: t("success", "Success!"),
+        kind: "success",
+        critical: true,
+        description: t("sectionCreated", "New section created"),
+      });
+    } catch (error) {
+      showNotification({
+        title: t("errorCreatingSection", "Error creating section"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  return (
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)}>
+      <ModalHeader title={t("createNewSection", "Create a new section")} />
+      <Form onSubmit={(event) => event.preventDefault()}>
+        <ModalBody>
+          <FormGroup legendText={""}>
+            <TextInput
+              id="sectionTitle"
+              labelText={t("enterSectionTitle", "Enter a section title")}
+              value={sectionTitle}
+              onChange={(event) => setSectionTitle(event.target.value)}
+            />
+          </FormGroup>
+        </ModalBody>
+      </Form>
+      <ModalFooter>
+        <Button onClick={() => onModalChange(false)} kind="secondary">
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button disabled={!sectionTitle} onClick={handleUpdatePageSections}>
+          <span>{t("save", "Save")}</span>
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+export default SectionModal;

package/src/components/interactive-builder/value-editor.component.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, TextInput } from "@carbon/react";
+import { Close, Save } from "@carbon/react/icons";
+import styles from "./value-editor.scss";
+
+type ValueEditorProps = {
+  id: string;
+  handleCancel: () => void;
+  handleSave: (value: string) => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+};
+
+const ValueEditor: React.FC<ValueEditorProps> = ({
+  id,
+  handleCancel,
+  handleSave,
+  onChange,
+  value,
+}) => {
+  const { t } = useTranslation();
+  const [tmpValue, setTmpValue] = useState(value);
+
+  return (
+    <>
+      <TextInput
+        id={id}
+        labelText=""
+        value={tmpValue}
+        onChange={(event) => setTmpValue(event.target.value)}
+      />
+      <div className={styles.actionButtons}>
+        <Button
+          size="md"
+          renderIcon={(props) => <Save {...props} size={16} />}
+          kind="primary"
+          onClick={() => handleSave(tmpValue)}
+        >
+          {t("saveButtonText", "Save")}
+        </Button>
+        <Button
+          size="md"
+          renderIcon={(props) => <Close {...props} size={16} />}
+          kind="secondary"
+          onClick={handleCancel}
+        >
+          {t("cancelButtonText", "Cancel")}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default ValueEditor;

package/src/components/interactive-builder/value-editor.scss

@@ -0,0 +1,10 @@
+.actionButtons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 1rem 0;
+
+  button {
+    margin-left: 1rem
+  }
+}