@pareto-engineering/design-system 4.9.2 → 4.10.0

package/dist/cjs/a/AreaChart/AreaChart.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _recharts = require("recharts");
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// front/packages/design-system/src/ui/a/AreaChart/AreaChart.jsx
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'area-chart';
+const AreaChart = _ref => {
+  let {
+    id,
+    className: userClassName,
+    data,
+    title,
+    xKey,
+    yKeys,
+    xLabel,
+    yLabel,
+    colors,
+    filled,
+    height,
+    width
+    // ...otherProps
+  } = _ref;
+  const processedData = data.map(item => {
+    const yValues = yKeys.map(key => item[key]);
+    const lowerBound = Math.min(...yValues);
+    const upperBound = Math.max(...yValues);
+    const margin = (upperBound - lowerBound) * 0.1;
+    return {
+      ...item,
+      bounds: [lowerBound - margin, upperBound + margin]
+    };
+  });
+  const yAxisBounds = () => {
+    const yValues = data.map(item => yKeys.map(key => item[key]));
+    const min = Math.min(...yValues.flat());
+    const max = Math.max(...yValues.flat());
+    const margin = (max - min) * 0.1;
+    return [min - margin, max + margin];
+  };
+  const CustomTooltipContent = _ref2 => {
+    let {
+      active,
+      payload,
+      label
+    } = _ref2;
+    if (active && payload && payload.length) {
+      const newPayload = payload.filter(item => item.name !== 'bounds');
+      return /*#__PURE__*/React.createElement("div", {
+        className: "custom-tooltip"
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "label"
+      }, `${xLabel}: ${label}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+        className: "label",
+        key: `${entry.name}`,
+        style: {
+          color: entry.color
+        }
+      }, `${entry.name}: ${entry.value}`)));
+    }
+    return null;
+  };
+  const CustomLegend = _ref3 => {
+    let {
+      colorsArray,
+      yKeysArray
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "custom-legend"
+    }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: "item"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "line",
+      style: {
+        backgroundColor: colorsArray[index]
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text"
+    }, key))));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(CustomLegend, {
+    colorsArray: colors,
+    yKeysArray: yKeys
+  }), /*#__PURE__*/React.createElement(_recharts.ResponsiveContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(_recharts.AreaChart, {
+    data: processedData
+  }, /*#__PURE__*/React.createElement(_recharts.CartesianGrid, {
+    strokeDasharray: "3 3"
+  }), /*#__PURE__*/React.createElement(_recharts.XAxis, {
+    dataKey: xKey,
+    label: {
+      value: xLabel,
+      position: 'insideBottom',
+      offset: -5
+    } // Adjusted offset for padding
+    ,
+    axisLine: false,
+    tickLine: false,
+    tickCount: 3
+  }), /*#__PURE__*/React.createElement(_recharts.YAxis, {
+    domain: yAxisBounds,
+    label: {
+      value: yLabel,
+      angle: -90,
+      position: 'insideLeft',
+      offset: 15
+    },
+    axisLine: false,
+    tickLine: false,
+    tickFormatter: value => value.toFixed(2)
+  }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
+    content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)
+  }), filled && /*#__PURE__*/React.createElement(_recharts.Area, {
+    id: "bounds",
+    type: "linear",
+    dataKey: "bounds",
+    stroke: "none",
+    fill: "var(--hard-ui-main-2)",
+    fillOpacity: 0.4,
+    activeDot: false,
+    dot: false,
+    label: false,
+    isAnimationActive: false
+  }), yKeys.map((key, index) => /*#__PURE__*/React.createElement(_recharts.Area, {
+    id: key,
+    key: key,
+    type: "linear",
+    dataKey: key,
+    stroke: colors[index],
+    fill: "none",
+    connectNulls: true,
+    dot: false,
+    activeDot: {
+      r: 4
+    },
+    isAnimationActive: false
+  })))));
+};
+AreaChart.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  title: _propTypes.default.string.isRequired,
+  xKey: _propTypes.default.string.isRequired,
+  yKeys: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  xLabel: _propTypes.default.string,
+  yLabel: _propTypes.default.string,
+  colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  filled: _propTypes.default.bool,
+  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+AreaChart.defaultProps = {
+  filled: false,
+  width: '100%',
+  height: 300
+};
+var _default = exports.default = AreaChart;

package/dist/cjs/a/AreaChart/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AreaChart", {
+  enumerable: true,
+  get: function () {
+    return _AreaChart.default;
+  }
+});
+var _AreaChart = _interopRequireDefault(require("./AreaChart"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/a/AreaChart/styles.scss

@@ -0,0 +1,89 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-text-font-size: calc(var(--s-1) * 1rem);
+$default-border-radius: .25rem;
+$default-legend-gap: .625rem;
+$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
+$default-legend-line-width: 1.25rem;
+$default-legend-line-height: .125rem;
+$default-legend-line-margin-right: .3125rem;
+$default-border-line-width: .0625rem;
+
+.#{bem.$base} {
+  &.area-chart {
+    background-color: var(--background-far);
+    border-radius: var(--theme-default-border-radius);
+    box-shadow: $default-box-shadow;
+    margin: $default-margin 0;
+    padding: $default-padding;
+
+    h3 {
+      color: var(--subtitle);
+      margin: calc($default-margin / 5);
+      text-align: left;
+    }
+
+    .custom-legend {
+      display: flex;
+      gap: $default-legend-gap;
+      justify-content: flex-end;
+      padding-bottom: $default-padding;
+      padding-right: calc($default-padding * .25);
+
+      .item {
+        align-items: center;
+        border: $default-border-line-width solid var(--ui-lines);
+        border-radius: $default-border-radius;
+        display: flex;
+        padding: $default-legend-padding;
+      }
+
+      .line {
+        display: inline-block;
+        height: $default-legend-line-height;
+        margin-right: $default-legend-line-margin-right;
+        width: $default-legend-line-width;
+      }
+
+      .text {
+        color: var(--paragraph);
+        font-size: calc($default-text-font-size * .75);
+      }
+    }
+
+    .custom-tooltip {
+      background-color: var(--background-far);
+      border: $default-border-line-width solid var(--ui-lines);
+      border-radius: $default-border-radius;
+      padding: calc($default-padding * .25);
+
+      .label {
+        color: var(--hard-paragraph);
+        font-size: $default-text-font-size;
+        margin: calc($default-margin * .25);
+      }
+    }
+
+    /* stylelint-disable selector-max-compound-selectors -- nested elements */
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-cartesian-grid line {
+          stroke: var(--ui-lines);
+        }
+
+        .recharts-text {
+          fill: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+
+        .recharts-text.recharts-label {
+          fill: var(--paragraph);
+          font-size: $default-text-font-size;
+        }
+      }
+    }
+  }
+}

package/dist/cjs/a/XMLEditor/XMLEditor.js

@@ -44,7 +44,7 @@ const XMLEditor = _ref => {
   (0, _react.useEffect)(() => {
     const startState = _state.EditorState.create({
       doc: config,
-      extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
+      extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab, ..._commands.historyKeymap]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), (0, _commands.history)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
       }), _view.EditorView.focusChangeEffect.of((state, focused) => {

package/dist/cjs/a/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "AppContextProvider", {
     return _AppContext.AppContextProvider;
   }
 });
+Object.defineProperty(exports, "AreaChart", {
+  enumerable: true,
+  get: function () {
+    return _AreaChart.AreaChart;
+  }
+});
 Object.defineProperty(exports, "BlurOverlay", {
   enumerable: true,
   get: function () {
@@ -230,4 +236,5 @@ var _Removable = require("./Removable");
 var _ToggleSwitch = require("./ToggleSwitch");
 var _XMLEditor = require("./XMLEditor");
 var _DatePicker = require("./DatePicker");
-var _Tooltip = require("./Tooltip");
+var _Tooltip = require("./Tooltip");
+var _AreaChart = require("./AreaChart");

package/dist/cjs/b/Button/styles.scss

@@ -124,6 +124,7 @@ $default-animation-time: .31s;
   }
 
   &.#{bem.$modifier-simple} {
+    --stroke-color: var(--x, var(--#{$default-color}));
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));

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

@@ -34,8 +34,8 @@ const FormBuilder = _ref => {
     formBuilderId,
     onBuilderFormSave,
     onBuilderError,
-    onRendererError,
     onRendererFormSave,
+    onFileUpload,
     onBuilderValidate,
     initialBuilderValues,
     fileUploadStatus,
@@ -62,9 +62,9 @@ const FormBuilder = _ref => {
     onSave: onRendererFormSave,
     readOnly: readOnly,
     shouldSubmit: shouldSubmit,
-    onError: onRendererError,
     fileUploadStatus: fileUploadStatus,
-    handleFileDelete: handleFileDelete
+    handleFileDelete: handleFileDelete,
+    onFileUpload: onFileUpload
   }));
 };
 FormBuilder.propTypes = {

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

@@ -18,28 +18,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* @pareto-engineering/generator-front 1.1.1-alpha.2 */ // Local Definitions
 const baseClassName = _exports.default.base;
 const componentClassName = 'renderer';
-const reconstructFormDataWithValues = (formData, values) => {
-  const valuesMap = {};
-  Object.keys(values).forEach(async key => {
-    if (key.includes('files')) {
-      const files = values[key].map(file => file instanceof File ? URL.createObjectURL(file) : file);
-      valuesMap[key] = files;
-    } else {
-      valuesMap[key] = values[key];
-    }
-  });
-  const newData = {
-    ...formData,
-    sections: formData.sections.map(section => ({
-      ...section,
-      inputs: section.inputs.map(input => ({
-        ...input,
-        value: valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value
-      }))
-    }))
-  };
-  return newData;
-};
 const validate = (currentSectionIndex, formData, values) => {
   const errors = {};
   const hasAtLeastOneValue = Object.keys(values).some(valueKey => {
@@ -58,6 +36,25 @@ const validate = (currentSectionIndex, formData, values) => {
   });
   return errors;
 };
+const reconstructFormDataWithValues = (formData, values) => {
+  const valuesMap = {};
+  Object.keys(values).forEach(async key => {
+    if (!key.includes('files')) {
+      valuesMap[key] = values[key];
+    }
+  });
+  const newData = {
+    ...formData,
+    sections: formData.sections.map(section => ({
+      ...section,
+      inputs: section.inputs.map(input => ({
+        ...input,
+        value: valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value
+      }))
+    }))
+  };
+  return newData;
+};
 
 /**
  * This is the component description.
@@ -70,15 +67,18 @@ const Renderer = _ref => {
     formData,
     readOnly,
     onSave,
-    onError,
     shouldSubmit,
     fileUploadStatus,
-    handleFileDelete
+    handleFileDelete,
+    onFileUpload,
+    shouldUpdateInputStateInRealTime = true
     // ...otherProps
   } = _ref;
   const [currentSectionIndex, setCurrentSectionIndex] = (0, _react.useState)(0);
   const [sectionHistory, setSectionHistory] = (0, _react.useState)([]);
-  const [updatedFormData, setUpdatedFormData] = (0, _react.useState)(formData);
+  const [updatedFormData, setUpdatedFormData] = (0, _react.useState)({
+    ...formData
+  });
   (0, _react.useEffect)(() => {
     setUpdatedFormData(formData);
   }, [formData]);
@@ -118,6 +118,9 @@ const Renderer = _ref => {
     }
   };
   const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1 || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit';
+  const ref = (0, _react.useRef)(null);
+  const currentSectionInputs = updatedFormData.sections[currentSectionIndex].inputs;
+  const hasErrorsOnInitialRender = currentSectionInputs.some(input => input.required && !ref.current?.values[input.name] || ref.current?.errors[input.name]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -125,31 +128,28 @@ const Renderer = _ref => {
   }, /*#__PURE__*/React.createElement(_formik.Formik, {
     initialValues: initialValues,
     onSubmit: handleSubmit,
-    validate: values => validate(currentSectionIndex, formData, values)
+    validate: values => validate(currentSectionIndex, updatedFormData, values),
+    innerRef: ref
   }, _ref2 => {
     let {
       values,
       errors
     } = _ref2;
     (0, _react.useEffect)(() => {
-      const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
-      setUpdatedFormData(formDataWithValues);
-      onSave?.(formDataWithValues);
+      if (shouldUpdateInputStateInRealTime) {
+        const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
+        onSave?.(formDataWithValues);
+      }
     }, [values]);
-    (0, _react.useEffect)(() => {
-      onError?.({
-        errors,
-        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, {
       readOnly: readOnly,
-      setUpdatedFormData: setUpdatedFormData,
       fileUploadStatus: fileUploadStatus,
-      handleFileDelete: handleFileDelete
+      handleFileDelete: handleFileDelete,
+      onFileUpload: onFileUpload,
+      sectionIndex: sectionIndex
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(_b.Button, {
@@ -164,7 +164,7 @@ const Renderer = _ref => {
       color: "interactive",
       isGradient: true,
       type: "submit",
-      disabled: hasErrors
+      disabled: hasErrors || hasErrorsOnInitialRender
     }, isSubmit ? 'Submit' : 'Next')));
   }));
 };

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

@@ -15,6 +15,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable no-alert */ /* @pareto-engineering/generator-front 1.1.1-alpha.2 */ // Local Definitions
 const baseClassName = _exports.default.base;
 const componentClassName = 'section';
+const fileTypeMapper = {
+  VID: 'Video',
+  TXT: 'Text',
+  IMG: 'Image',
+  PDF: 'PDF',
+  AUD: 'Audio',
+  FILE: 'Generic'
+};
 
 /**
  * This is the component description.
@@ -29,7 +37,9 @@ const Section = _ref => {
     inputs,
     readOnly,
     fileUploadStatus,
-    handleFileDelete
+    handleFileDelete,
+    onFileUpload,
+    sectionIndex
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -41,13 +51,29 @@ const Section = _ref => {
   }, title), /*#__PURE__*/React.createElement(_.ExpandableLexicalPreview, {
     nodes: description,
     name: "instructions"
-  }), inputs?.map(input => /*#__PURE__*/React.createElement(_f.FormInput, _extends({
-    key: input.name
-  }, input, {
-    disabled: readOnly,
-    uploadStatus: fileUploadStatus,
-    handleFileDelete: handleFileDelete
-  }))));
+  }), inputs?.map((input, inputIndex) => {
+    const isFileInput = input.type === 'file';
+    return /*#__PURE__*/React.createElement(_f.FormInput, _extends({
+      key: input.name
+    }, input, {
+      disabled: readOnly
+    }, isFileInput && {
+      uploadStatus: fileUploadStatus,
+      handleFileDelete,
+      onChange: files => {
+        const filesToUpload = files?.filter(file => file instanceof File).map(file => ({
+          file,
+          name: file.name,
+          mimeType: file.type,
+          type: fileTypeMapper[(0, _f.getFileType)(file)] || 'Generic',
+          title: file.name,
+          sectionIndex,
+          inputIndex
+        }));
+        onFileUpload(filesToUpload);
+      }
+    }));
+  }));
 };
 Section.propTypes = {
   /**