@openmrs/esm-form-builder-app 2.0.2-pre.574 → 2.0.2-pre.586

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

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   ComposedModal,
@@ -10,26 +10,21 @@ import {
   ModalHeader,
   Stack,
   TextInput,
-} from "@carbon/react";
-import { showToast, showNotification } from "@openmrs/esm-framework";
-import type { Schema } from "../../types";
+} from '@carbon/react';
+import { showToast, showNotification } from '@openmrs/esm-framework';
+import type { Schema } from '../../types';
 
-type NewFormModalProps = {
+interface NewFormModalProps {
   schema: Schema;
   onSchemaChange: (schema: Schema) => void;
   onModalChange: (showModal: boolean) => void;
   showModal: boolean;
-};
+}
 
-const NewFormModal: React.FC<NewFormModalProps> = ({
-  schema,
-  onSchemaChange,
-  showModal,
-  onModalChange,
-}) => {
+const NewFormModal: React.FC<NewFormModalProps> = ({ schema, onSchemaChange, showModal, onModalChange }) => {
   const { t } = useTranslation();
-  const [formName, setFormName] = useState("");
-  const [formDescription, setFormDescription] = useState("");
+  const [formName, setFormName] = useState('');
+  const [formDescription, setFormDescription] = useState('');
 
   const updateSchema = (updates: Partial<Schema>) => {
     try {
@@ -37,18 +32,20 @@ const NewFormModal: React.FC<NewFormModalProps> = ({
       onSchemaChange(updatedSchema);
 
       showToast({
-        title: t("success", "Success!"),
-        kind: "success",
+        title: t('success', 'Success!'),
+        kind: 'success',
         critical: true,
-        description: t("formCreated", "New form created"),
+        description: t('formCreated', 'New form created'),
       });
     } catch (error) {
-      showNotification({
-        title: t("errorCreatingForm", "Error creating form"),
-        kind: "error",
-        critical: true,
-        description: error?.message,
-      });
+      if (error instanceof Error) {
+        showNotification({
+          title: t('errorCreatingForm', 'Error creating form'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      }
     }
   };
 
@@ -64,41 +61,30 @@ const NewFormModal: React.FC<NewFormModalProps> = ({
   };
 
   return (
-    <ComposedModal
-      open={showModal}
-      onClose={() => onModalChange(false)}
-      preventCloseOnClickOutside
-    >
-      <ModalHeader title={t("createNewForm", "Create a new form")} />
-      <Form onSubmit={(event) => event.preventDefault()}>
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
+      <ModalHeader title={t('createNewForm', 'Create a new form')} />
+      <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <Stack gap={5}>
-            <FormGroup legendText={""}>
+            <FormGroup legendText={''}>
               <TextInput
                 id="formName"
-                labelText={t("formName", "Form name")}
-                placeholder={t(
-                  "formNamePlaceholder",
-                  "What the form is called in the system"
-                )}
+                labelText={t('formName', 'Form name')}
+                placeholder={t('namePlaceholder', 'What the form is called in the system')}
                 value={formName}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                  setFormName(event.target.value)
-                }
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => setFormName(event.target.value)}
               />
             </FormGroup>
-            <FormGroup legendText={""}>
+            <FormGroup legendText={''}>
               <TextInput
                 id="formDescription"
-                labelText={t("formDescription", "Form description")}
+                labelText={t('formDescription', 'Form description')}
                 placeholder={t(
-                  "formDescriptionPlaceholder",
-                  "A short description of the form e.g. A form for collecting COVID-19 symptoms"
+                  'formDescriptionPlaceholder',
+                  'A short description of the form e.g. A form for collecting COVID-19 symptoms',
                 )}
                 value={formDescription}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                  setFormDescription(event.target.value)
-                }
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => setFormDescription(event.target.value)}
               />
             </FormGroup>
           </Stack>
@@ -106,10 +92,10 @@ const NewFormModal: React.FC<NewFormModalProps> = ({
       </Form>
       <ModalFooter>
         <Button kind="secondary" onClick={() => onModalChange(false)}>
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button disabled={!formName} onClick={handleCreateForm}>
-          <span>{t("createForm", "Create Form")}</span>
+          <span>{t('createForm', 'Create Form')}</span>
         </Button>
       </ModalFooter>
     </ComposedModal>

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

@@ -1,33 +1,19 @@
-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 type { Schema } from "../../types";
+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 type { Schema } from '../../types';
 
-type PageModalProps = {
+interface PageModalProps {
   schema: Schema;
   onSchemaChange: (schema: Schema) => void;
   showModal: boolean;
   onModalChange: (showModal: boolean) => void;
-};
+}
 
-const PageModal: React.FC<PageModalProps> = ({
-  schema,
-  onSchemaChange,
-  showModal,
-  onModalChange,
-}) => {
+const PageModal: React.FC<PageModalProps> = ({ schema, onSchemaChange, showModal, onModalChange }) => {
   const { t } = useTranslation();
-  const [pageTitle, setPageTitle] = useState("");
+  const [pageTitle, setPageTitle] = useState('');
 
   const handleUpdatePageTitle = () => {
     updatePages();
@@ -43,49 +29,47 @@ const PageModal: React.FC<PageModalProps> = ({
         });
 
         onSchemaChange({ ...schema });
-        setPageTitle("");
+        setPageTitle('');
       }
       showToast({
-        title: t("success", "Success!"),
-        kind: "success",
+        title: t('success', 'Success!'),
+        kind: 'success',
         critical: true,
-        description: t("pageCreated", "New page created"),
+        description: t('pageCreated', 'New page created'),
       });
     } catch (error) {
-      showNotification({
-        title: t("errorCreatingPage", "Error creating page"),
-        kind: "error",
-        critical: true,
-        description: error?.message,
-      });
+      if (error instanceof Error) {
+        showNotification({
+          title: t('errorCreatingPage', 'Error creating page'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      }
     }
   };
 
   return (
-    <ComposedModal
-      open={showModal}
-      onClose={() => onModalChange(false)}
-      preventCloseOnClickOutside
-    >
-      <ModalHeader title={t("createNewPage", "Create a new page")} />
-      <Form onSubmit={(event) => event.preventDefault()}>
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
+      <ModalHeader title={t('createNewPage', 'Create a new page')} />
+      <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
-          <FormGroup legendText={""}>
+          <FormGroup legendText={''}>
             <TextInput
               id="pageTitle"
-              labelText={t("enterPageTitle", "Enter a title for your new page")}
+              labelText={t('enterPageTitle', 'Enter a title for your new page')}
               value={pageTitle}
-              onChange={(event) => setPageTitle(event.target.value)}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setPageTitle(event.target.value)}
             />
           </FormGroup>
         </ModalBody>
       </Form>
       <ModalFooter>
         <Button onClick={() => onModalChange(false)} kind="secondary">
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button disabled={!pageTitle} onClick={handleUpdatePageTitle}>
-          <span>{t("save", "Save")}</span>
+          <span>{t('save', 'Save')}</span>
         </Button>
       </ModalFooter>
     </ComposedModal>

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

@@ -104,3 +104,10 @@
     width: 100%;
   }
 }
+
+.error {
+  width: 100%;
+  max-width: unset;
+  padding: '0rem';
+  margin-bottom: 1rem;
+}

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

@@ -1,26 +1,17 @@
-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 type { Schema } from "../../types";
+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 type { Schema } from '../../types';
 
-type SectionModalProps = {
+interface SectionModalProps {
   schema: Schema;
   onSchemaChange: (schema: Schema) => void;
   pageIndex: number;
   resetIndices: () => void;
   showModal: boolean;
   onModalChange: (showModal: boolean) => void;
-};
+}
 
 const SectionModal: React.FC<SectionModalProps> = ({
   schema,
@@ -31,7 +22,7 @@ const SectionModal: React.FC<SectionModalProps> = ({
   onModalChange,
 }) => {
   const { t } = useTranslation();
-  const [sectionTitle, setSectionTitle] = useState("");
+  const [sectionTitle, setSectionTitle] = useState('');
 
   const handleUpdatePageSections = () => {
     updateSections();
@@ -42,54 +33,52 @@ const SectionModal: React.FC<SectionModalProps> = ({
     try {
       schema.pages[pageIndex]?.sections?.push({
         label: sectionTitle,
-        isExpanded: "true",
+        isExpanded: 'true',
         questions: [],
       });
       onSchemaChange({ ...schema });
-      setSectionTitle("");
+      setSectionTitle('');
       resetIndices();
 
       showToast({
-        title: t("success", "Success!"),
-        kind: "success",
+        title: t('success', 'Success!'),
+        kind: 'success',
         critical: true,
-        description: t("sectionCreated", "New section created"),
+        description: t('sectionCreated', 'New section created'),
       });
     } catch (error) {
-      showNotification({
-        title: t("errorCreatingSection", "Error creating section"),
-        kind: "error",
-        critical: true,
-        description: error?.message,
-      });
+      if (error instanceof Error) {
+        showNotification({
+          title: t('errorCreatingSection', 'Error creating section'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      }
     }
   };
 
   return (
-    <ComposedModal
-      open={showModal}
-      onClose={() => onModalChange(false)}
-      preventCloseOnClickOutside
-    >
-      <ModalHeader title={t("createNewSection", "Create a new section")} />
-      <Form onSubmit={(event) => event.preventDefault()}>
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
+      <ModalHeader title={t('createNewSection', 'Create a new section')} />
+      <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
-          <FormGroup legendText={""}>
+          <FormGroup legendText={''}>
             <TextInput
               id="sectionTitle"
-              labelText={t("enterSectionTitle", "Enter a section title")}
+              labelText={t('enterSectionTitle', 'Enter a section title')}
               value={sectionTitle}
-              onChange={(event) => setSectionTitle(event.target.value)}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setSectionTitle(event.target.value)}
             />
           </FormGroup>
         </ModalBody>
       </Form>
       <ModalFooter>
         <Button onClick={() => onModalChange(false)} kind="secondary">
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button disabled={!sectionTitle} onClick={handleUpdatePageSections}>
-          <span>{t("save", "Save")}</span>
+          <span>{t('save', 'Save')}</span>
         </Button>
       </ModalFooter>
     </ComposedModal>

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

@@ -1,23 +1,18 @@
-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";
+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 = {
+interface 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,
-  value,
-}) => {
+const ValueEditor: React.FC<ValueEditorProps> = ({ id, handleCancel, handleSave, value }) => {
   const { t } = useTranslation();
   const [tmpValue, setTmpValue] = useState(value);
 
@@ -27,7 +22,7 @@ const ValueEditor: React.FC<ValueEditorProps> = ({
         id={id}
         labelText=""
         value={tmpValue}
-        onChange={(event) => setTmpValue(event.target.value)}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => setTmpValue(event.target.value)}
       />
       <div className={styles.actionButtons}>
         <Button
@@ -36,7 +31,7 @@ const ValueEditor: React.FC<ValueEditorProps> = ({
           kind="primary"
           onClick={() => handleSave(tmpValue)}
         >
-          {t("saveButtonText", "Save")}
+          {t('saveButtonText', 'Save')}
         </Button>
         <Button
           size="md"
@@ -44,7 +39,7 @@ const ValueEditor: React.FC<ValueEditorProps> = ({
           kind="secondary"
           onClick={handleCancel}
         >
-          {t("cancelButtonText", "Cancel")}
+          {t('cancelButtonText', 'Cancel')}
         </Button>
       </div>
     </>