@pareto-engineering/design-system 4.9.0 → 4.9.2

package/dist/cjs/f/fields/FileUpload/FileUpload.js

@@ -101,6 +101,7 @@ const FileUpload = _ref => {
     });
   };
   const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept;
+  const isAnyFileUploading = Object.values(uploadStatus ?? {})?.map(e => e?.status)?.some(status => status === 'pending');
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `preview-${filePreviewAlignment}`, `y-${color}`].filter(e => e).join(' '),
@@ -119,7 +120,7 @@ const FileUpload = _ref => {
     type: "file",
     accept: acceptOptions,
     multiple: multiple || maxCount && maxCount > 0,
-    disabled: disabled,
+    disabled: disabled || isAnyFileUploading,
     onChange: handleChange
   }), /*#__PURE__*/React.createElement("span", {
     className: "ai-icon"
@@ -226,7 +227,8 @@ FileUpload.defaultProps = {
   disabled: false,
   color: 'paragraph',
   filePreviewAlignment: 'bottom',
-  viewOnly: false
+  viewOnly: false,
+  multiple: true
 };
 FileUpload.Preview = _common.Preview;
 var _default = exports.default = FileUpload;

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js

@@ -141,7 +141,7 @@ const InputBuilder = _ref => {
     name: `sections.${sectionIndex}.inputs.${inputIndex}.label`,
     placeholder: "Question"
   }), hasDescription && /*#__PURE__*/React.createElement(_f.TextInput, {
-    label: "Description(optional)",
+    label: "Description (optional)",
     name: `sections.${sectionIndex}.inputs.${inputIndex}.description`,
     placeholder: "Describe details for the question"
   })), shouldRenderOptions && /*#__PURE__*/React.createElement(_formik.FieldArray, {

package/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js

@@ -22,7 +22,7 @@ const reconstructFormDataWithValues = (formData, values) => {
   const valuesMap = {};
   Object.keys(values).forEach(async key => {
     if (key.includes('files')) {
-      const files = values[key].map(file => URL.createObjectURL(file));
+      const files = values[key].map(file => file instanceof File ? URL.createObjectURL(file) : file);
       valuesMap[key] = files;
     } else {
       valuesMap[key] = values[key];
@@ -34,13 +34,13 @@ const reconstructFormDataWithValues = (formData, values) => {
       ...section,
       inputs: section.inputs.map(input => ({
         ...input,
-        value: valuesMap[input.name] || input.value
+        value: valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value
       }))
     }))
   };
   return newData;
 };
-const validate = values => {
+const validate = (currentSectionIndex, formData, values) => {
   const errors = {};
   const hasAtLeastOneValue = Object.keys(values).some(valueKey => {
     const inputValue = values[valueKey];
@@ -49,6 +49,13 @@ const validate = values => {
   if (!hasAtLeastOneValue) {
     errors.message = 'At least one input must have a value';
   }
+
+  // Check required fields for current section
+  formData.sections[currentSectionIndex].inputs.forEach(input => {
+    if (input.required && !values[input.name]) {
+      errors[input.name] = 'This field is required';
+    }
+  });
   return errors;
 };
 
@@ -118,7 +125,7 @@ const Renderer = _ref => {
   }, /*#__PURE__*/React.createElement(_formik.Formik, {
     initialValues: initialValues,
     onSubmit: handleSubmit,
-    validate: validate
+    validate: values => validate(currentSectionIndex, formData, values)
   }, _ref2 => {
     let {
       values,
@@ -135,6 +142,7 @@ const Renderer = _ref => {
         values
       });
     }, [errors, values]);
+    const hasErrors = Object.keys(errors).length > 0;
     return /*#__PURE__*/React.createElement(_formik.Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(_common.Section, _extends({
       key: `${section.title}`
     }, section, {
@@ -144,7 +152,8 @@ const Renderer = _ref => {
       handleFileDelete: handleFileDelete
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
-    }, /*#__PURE__*/React.createElement(_b.Button, {
+    }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(_b.Button, {
+      className: "previous-button",
       color: "interactive",
       isGradient: true,
       isCompact: true,
@@ -154,7 +163,8 @@ const Renderer = _ref => {
     }, "Previous"), (!isSubmit || shouldSubmit) && /*#__PURE__*/React.createElement(_b.Button, {
       color: "interactive",
       isGradient: true,
-      type: "submit"
+      type: "submit",
+      disabled: hasErrors
     }, isSubmit ? 'Submit' : 'Next')));
   }));
 };

package/dist/cjs/g/FormBuilder/common/Renderer/styles.scss

@@ -21,6 +21,10 @@ $default-margin: 1rem;
       display: flex;
       gap: var(--gap);
       justify-content: space-between;
+
+      > .previous-button {
+        align-items: center;
+      }
     }
   }
 }

package/dist/es/f/fields/FileUpload/FileUpload.js

@@ -90,6 +90,7 @@ const FileUpload = ({
     });
   };
   const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept;
+  const isAnyFileUploading = Object.values(uploadStatus ?? {})?.map(e => e?.status)?.some(status => status === 'pending');
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `preview-${filePreviewAlignment}`, `y-${color}`].filter(e => e).join(' '),
@@ -108,7 +109,7 @@ const FileUpload = ({
     type: "file",
     accept: acceptOptions,
     multiple: multiple || maxCount && maxCount > 0,
-    disabled: disabled,
+    disabled: disabled || isAnyFileUploading,
     onChange: handleChange
   }), /*#__PURE__*/React.createElement("span", {
     className: "ai-icon"
@@ -215,7 +216,8 @@ FileUpload.defaultProps = {
   disabled: false,
   color: 'paragraph',
   filePreviewAlignment: 'bottom',
-  viewOnly: false
+  viewOnly: false,
+  multiple: true
 };
 FileUpload.Preview = Preview;
 export default FileUpload;

package/dist/es/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js

@@ -131,7 +131,7 @@ const InputBuilder = ({
     name: `sections.${sectionIndex}.inputs.${inputIndex}.label`,
     placeholder: "Question"
   }), hasDescription && /*#__PURE__*/React.createElement(TextInput, {
-    label: "Description(optional)",
+    label: "Description (optional)",
     name: `sections.${sectionIndex}.inputs.${inputIndex}.description`,
     placeholder: "Describe details for the question"
   })), shouldRenderOptions && /*#__PURE__*/React.createElement(FieldArray, {

package/dist/es/g/FormBuilder/common/Renderer/Renderer.js

@@ -17,7 +17,7 @@ const reconstructFormDataWithValues = (formData, values) => {
   const valuesMap = {};
   Object.keys(values).forEach(async key => {
     if (key.includes('files')) {
-      const files = values[key].map(file => URL.createObjectURL(file));
+      const files = values[key].map(file => file instanceof File ? URL.createObjectURL(file) : file);
       valuesMap[key] = files;
     } else {
       valuesMap[key] = values[key];
@@ -29,13 +29,13 @@ const reconstructFormDataWithValues = (formData, values) => {
       ...section,
       inputs: section.inputs.map(input => ({
         ...input,
-        value: valuesMap[input.name] || input.value
+        value: valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value
       }))
     }))
   };
   return newData;
 };
-const validate = values => {
+const validate = (currentSectionIndex, formData, values) => {
   const errors = {};
   const hasAtLeastOneValue = Object.keys(values).some(valueKey => {
     const inputValue = values[valueKey];
@@ -44,6 +44,13 @@ const validate = values => {
   if (!hasAtLeastOneValue) {
     errors.message = 'At least one input must have a value';
   }
+
+  // Check required fields for current section
+  formData.sections[currentSectionIndex].inputs.forEach(input => {
+    if (input.required && !values[input.name]) {
+      errors[input.name] = 'This field is required';
+    }
+  });
   return errors;
 };
 
@@ -112,7 +119,7 @@ const Renderer = ({
   }, /*#__PURE__*/React.createElement(Formik, {
     initialValues: initialValues,
     onSubmit: handleSubmit,
-    validate: validate
+    validate: values => validate(currentSectionIndex, formData, values)
   }, ({
     values,
     errors
@@ -128,6 +135,7 @@ const Renderer = ({
         values
       });
     }, [errors, values]);
+    const hasErrors = Object.keys(errors).length > 0;
     return /*#__PURE__*/React.createElement(Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
       key: `${section.title}`
     }, section, {
@@ -137,7 +145,8 @@ const Renderer = ({
       handleFileDelete: handleFileDelete
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(Button, {
+      className: "previous-button",
       color: "interactive",
       isGradient: true,
       isCompact: true,
@@ -147,7 +156,8 @@ const Renderer = ({
     }, "Previous"), (!isSubmit || shouldSubmit) && /*#__PURE__*/React.createElement(Button, {
       color: "interactive",
       isGradient: true,
-      type: "submit"
+      type: "submit",
+      disabled: hasErrors
     }, isSubmit ? 'Submit' : 'Next')));
   }));
 };

package/dist/es/g/FormBuilder/common/Renderer/styles.scss

@@ -21,6 +21,10 @@ $default-margin: 1rem;
       display: flex;
       gap: var(--gap);
       justify-content: space-between;
+
+      > .previous-button {
+        align-items: center;
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.9.0",
+  "version": "4.9.2",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "198830358910af7c44d657ad846d3c7ce0967181"
+  "gitHead": "d7034652bbfb7fa7362d9cedaa04ae23fc8323ad"
 }

package/src/ui/f/fields/FileUpload/FileUpload.jsx

@@ -98,6 +98,8 @@ const FileUpload = ({
 
   const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept
 
+  const isAnyFileUploading = Object.values(uploadStatus ?? {})?.map((e) => e?.status)?.some((status) => status === 'pending')
+
   return (
     <div
       id={id}
@@ -128,7 +130,7 @@ const FileUpload = ({
             type="file"
             accept={acceptOptions}
             multiple={multiple || (maxCount && maxCount > 0)}
-            disabled={disabled}
+            disabled={disabled || isAnyFileUploading}
             onChange={handleChange}
           />
           <span className="ai-icon">
@@ -270,6 +272,7 @@ FileUpload.defaultProps = {
   color               :'paragraph',
   filePreviewAlignment:'bottom',
   viewOnly            :false,
+  multiple            :true,
 }
 
 FileUpload.Preview = Preview

package/src/ui/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.jsx

@@ -191,7 +191,7 @@ const InputBuilder = ({
           />
           {hasDescription && (
             <TextInput
-              label="Description(optional)"
+              label="Description (optional)"
               name={`sections.${sectionIndex}.inputs.${inputIndex}.description`}
               placeholder="Describe details for the question"
             />

package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx

@@ -25,7 +25,9 @@ const reconstructFormDataWithValues = (formData, values) => {
   const valuesMap = {}
   Object.keys(values).forEach(async (key) => {
     if (key.includes('files')) {
-      const files = values[key].map((file) => URL.createObjectURL(file))
+      const files = values[key].map((file) => (
+        file instanceof File ? URL.createObjectURL(file) : file
+      ))
       valuesMap[key] = files
     } else {
       valuesMap[key] = values[key]
@@ -37,14 +39,14 @@ const reconstructFormDataWithValues = (formData, values) => {
       ...section,
       inputs:section.inputs.map((input) => ({
         ...input,
-        value:valuesMap[input.name] || input.value,
+        value:valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value,
       })),
     })),
   }
   return newData
 }
 
-const validate = (values) => {
+const validate = (currentSectionIndex, formData, values) => {
   const errors = {}
 
   const hasAtLeastOneValue = Object.keys(values).some((valueKey) => {
@@ -56,6 +58,13 @@ const validate = (values) => {
     errors.message = 'At least one input must have a value'
   }
 
+  // Check required fields for current section
+  formData.sections[currentSectionIndex].inputs.forEach((input) => {
+    if (input.required && !values[input.name]) {
+      errors[input.name] = 'This field is required'
+    }
+  })
+
   return errors
 }
 
@@ -142,7 +151,7 @@ const Renderer = ({
       <Formik
         initialValues={initialValues}
         onSubmit={handleSubmit}
-        validate={validate}
+        validate={(values) => validate(currentSectionIndex, formData, values)}
       >
         {({ values, errors }) => {
           useEffect(() => {
@@ -155,6 +164,8 @@ const Renderer = ({
             onError?.({ errors, values })
           }, [errors, values])
 
+          const hasErrors = Object.keys(errors).length > 0
+
           return (
             <Form>
               {updatedFormData.sections.map((section, sectionIndex) => (
@@ -170,20 +181,25 @@ const Renderer = ({
                 )
               ))}
               <div className="navigator-container">
-                <Button
-                  color="interactive"
-                  isGradient
-                  isCompact
-                  isGhost
-                  onClick={handlePrevious}
-                  disabled={sectionHistory.length === 0}
-                >
-                  Previous
-                </Button>
+                {
+                  updatedFormData.sections.length > 1 && (
+                    <Button
+                      className="previous-button"
+                      color="interactive"
+                      isGradient
+                      isCompact
+                      isGhost
+                      onClick={handlePrevious}
+                      disabled={sectionHistory.length === 0}
+                    >
+                      Previous
+                    </Button>
+                  )
+                }
                 {(!isSubmit || shouldSubmit) && (
-                <Button color="interactive" isGradient type="submit">
-                  {isSubmit ? 'Submit' : 'Next'}
-                </Button>
+                  <Button color="interactive" isGradient type="submit" disabled={hasErrors}>
+                    {isSubmit ? 'Submit' : 'Next'}
+                  </Button>
                 )}
               </div>
             </Form>

package/src/ui/g/FormBuilder/common/Renderer/styles.scss

@@ -21,6 +21,10 @@ $default-margin: 1rem;
       display: flex;
       gap: var(--gap);
       justify-content: space-between;
+
+      > .previous-button {
+        align-items: center;
+      }
     }
   }
 }

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -27888,6 +27888,7 @@ exports[`Storyshots f/fields/FileUpload Base 1`] = `
         className="file"
         disabled={false}
         id="section_0_input_0"
+        multiple={true}
         onChange={[Function]}
         type="file"
       />
@@ -33258,16 +33259,7 @@ exports[`Storyshots g/FormBuilder Renderer 1`] = `
         </div>
         <div
           className="navigator-container"
-        >
-          <button
-            className="base button x-interactive modifierGhost modifierCompact modifierGradient"
-            disabled={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Previous
-          </button>
-        </div>
+        />
       </form>
     </div>
   </div>,
@@ -33366,16 +33358,7 @@ exports[`Storyshots g/FormBuilder Renderer With Disabled 1`] = `
         </div>
         <div
           className="navigator-container"
-        >
-          <button
-            className="base button x-interactive modifierGhost modifierCompact modifierGradient"
-            disabled={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Previous
-          </button>
-        </div>
+        />
       </form>
     </div>
   </div>,
@@ -33475,14 +33458,6 @@ exports[`Storyshots g/FormBuilder Renderer With Submit 1`] = `
         <div
           className="navigator-container"
         >
-          <button
-            className="base button x-interactive modifierGhost modifierCompact modifierGradient"
-            disabled={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Previous
-          </button>
           <button
             className="base button x-interactive modifierGradient"
             type="submit"