@pareto-engineering/design-system 5.0.0 → 5.0.2

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _formik = require("formik");
+var _convertLatexToHtml = _interopRequireDefault(require("./convertLatexToHtml"));
+var _TextareaInput = require("../TextareaInput");
+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; }
+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.0.12 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'latex-preview-input';
+
+/**
+ * This is the component description.
+ */
+const LatexPreviewInput = _ref => {
+  let {
+    id,
+    className,
+    userClassName,
+    disabled,
+    style,
+    ...otherProps
+  } = _ref;
+  const {
+    name
+  } = otherProps;
+  const {
+    values
+  } = (0, _formik.useFormikContext)();
+  const LatexPreview = (0, _react.useMemo)(() => (0, _convertLatexToHtml.default)(values[name]), [values[name]]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, 'form-input'].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(_TextareaInput.TextareaInput, _extends({
+    className: "preview-child",
+    disabled: disabled
+  }, otherProps)), /*#__PURE__*/React.createElement("div", {
+    className: "latex-container preview-child",
+    dangerouslySetInnerHTML: {
+      __html: LatexPreview
+    }
+  }));
+};
+LatexPreviewInput.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * Whether the Form input input should be disabled
+   */
+  disabled: _propTypes.default.bool
+};
+LatexPreviewInput.defaultProps = {
+  disabled: false
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(LatexPreviewInput);

package/dist/cjs/f/fields/LatexPreviewInput/convertLatexToHtml.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
+var _remarkMath = _interopRequireDefault(require("remark-math"));
+var _betterReactMathjax = require("better-react-mathjax");
+var _svg = _interopRequireDefault(require("rehype-mathjax/svg"));
+var _server = _interopRequireDefault(require("react-dom/server"));
+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; }
+const convertLatexToHtml = content => {
+  if (content.includes('https://forte-assets.pareto.ai/')) {
+    return content;
+  }
+  const processedContent = content.replaceAll(/\\\\/g, '\n\n');
+  const renderedContent = _server.default.renderToString(/*#__PURE__*/React.createElement(_betterReactMathjax.MathJaxContext, null, /*#__PURE__*/React.createElement(_reactMarkdown.default, {
+    remarkPlugins: [_remarkMath.default],
+    rehypePlugins: [_svg.default],
+    components: {
+      math: _ref => {
+        let {
+          value
+        } = _ref;
+        return /*#__PURE__*/React.createElement(_betterReactMathjax.MathJax.Node, {
+          formula: value
+        });
+      },
+      inlineMath: _ref2 => {
+        let {
+          value
+        } = _ref2;
+        return /*#__PURE__*/React.createElement(_betterReactMathjax.MathJax.Node, {
+          inline: true,
+          formula: value
+        });
+      }
+    }
+  }, processedContent)));
+  return renderedContent;
+};
+var _default = exports.default = convertLatexToHtml;

package/dist/cjs/f/fields/LatexPreviewInput/index.js

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

package/dist/cjs/f/fields/LatexPreviewInput/styles.scss

@@ -0,0 +1,24 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.latex-preview-input {
+  display: flex;
+  flex-direction: row;
+  gap: $default-margin;
+
+  > .preview-child {
+    flex: 1;
+  }
+
+  > .latex-container {
+    border: 1px solid var(--ui-lines);
+    border-radius: var(--theme-default-border-radius);
+    margin-top: calc($default-margin * 2.5);
+    max-width: 50%;
+    overflow: auto;
+    padding: 0 $default-margin;
+  }
+}

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

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "FileUpload", {
     return _FileUpload.FileUpload;
   }
 });
+Object.defineProperty(exports, "LatexPreviewInput", {
+  enumerable: true,
+  get: function () {
+    return _LatexPreviewInput.LatexPreviewInput;
+  }
+});
 Object.defineProperty(exports, "LinkInput", {
   enumerable: true,
   get: function () {
@@ -75,6 +81,12 @@ Object.defineProperty(exports, "TextareaInput", {
     return _TextareaInput.TextareaInput;
   }
 });
+Object.defineProperty(exports, "convertLatexToHtml", {
+  enumerable: true,
+  get: function () {
+    return _LatexPreviewInput.convertLatexToHtml;
+  }
+});
 Object.defineProperty(exports, "fileUploadOptions", {
   enumerable: true,
   get: function () {
@@ -104,4 +116,5 @@ var _Checkbox = require("./Checkbox");
 var _QueryChoices = require("./QueryChoices");
 var _LinkInput = require("./LinkInput");
 var _EditorInput = require("./EditorInput");
+var _LatexPreviewInput = require("./LatexPreviewInput");
 var _FileUpload = require("./FileUpload");

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

@@ -40,8 +40,7 @@ const FormBuilder = _ref => {
     initialBuilderValues,
     fileUploadStatus,
     handleFileDelete,
-    taskData,
-    customInputMap
+    taskData
     // ...otherProps
   } = _ref;
   const formattedJson = JSON.stringify(taskData, null, 2);
@@ -57,8 +56,7 @@ const FormBuilder = _ref => {
     formBuilderId: formBuilderId,
     onSave: onBuilderFormSave,
     onError: onBuilderError,
-    validate: onBuilderValidate,
-    customInputMap: customInputMap
+    validate: onBuilderValidate
   }), mode === 'render' && /*#__PURE__*/React.createElement(_common.Renderer, {
     formData: formData,
     onSave: onRendererFormSave,
@@ -66,8 +64,7 @@ const FormBuilder = _ref => {
     shouldSubmit: shouldSubmit,
     fileUploadStatus: fileUploadStatus,
     handleFileDelete: handleFileDelete,
-    onFileUpload: onFileUpload,
-    customInputMap: customInputMap
+    onFileUpload: onFileUpload
   }));
 };
 FormBuilder.propTypes = {

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

@@ -42,7 +42,6 @@ const Builder = _ref => {
     onError,
     validate,
     formBuilderId,
-    customInputMap,
     initialValues = {}
     // ...otherProps
   } = _ref;
@@ -121,8 +120,7 @@ const Builder = _ref => {
           remove,
           values,
           setFieldValue
-        }),
-        customInputMap: customInputMap
+        })
       })), /*#__PURE__*/React.createElement("div", {
         className: "section-footer"
       }, /*#__PURE__*/React.createElement("button", {

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

@@ -36,8 +36,7 @@ const InputBuilder = _ref => {
     style,
     sectionIndex,
     inputIndex,
-    onDelete,
-    customInputMap
+    onDelete
     // ...otherProps
   } = _ref;
   const {
@@ -64,7 +63,6 @@ const InputBuilder = _ref => {
   const handleToggleShowSpecificFileTypes = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
   };
-  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -104,10 +102,10 @@ const InputBuilder = _ref => {
     }, {
       value: 'file',
       label: 'File upload'
-    }, ...(customInputTypes && customInputTypes.map(customInputKey => ({
-      value: customInputKey,
-      label: customInputMap[customInputKey].label
-    })))]
+    }, {
+      value: 'latex-preview-input',
+      label: 'Textbox with LaTeX preview'
+    }]
   }), /*#__PURE__*/React.createElement("div", {
     className: "controls"
   }, /*#__PURE__*/React.createElement("button", {

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

@@ -33,8 +33,7 @@ const Section = _ref => {
     className: userClassName,
     style,
     index,
-    handleDeleteSection,
-    customInputMap
+    handleDeleteSection
     // ...otherProps
   } = _ref;
   const {
@@ -66,8 +65,7 @@ const Section = _ref => {
         sectionIndex: index,
         inputIndex: indx,
         onDelete: handleDeleteInput,
-        onCopy: handleCopyInput,
-        customInputMap: customInputMap
+        onCopy: handleCopyInput
       }),
       identifier: input.name
     }));

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

@@ -71,8 +71,7 @@ const Renderer = _ref => {
     fileUploadStatus,
     handleFileDelete,
     onFileUpload,
-    shouldUpdateInputStateInRealTime = true,
-    customInputMap
+    shouldUpdateInputStateInRealTime = true
     // ...otherProps
   } = _ref;
   const [currentSectionIndex, setCurrentSectionIndex] = (0, _react.useState)(0);
@@ -150,8 +149,7 @@ const Renderer = _ref => {
       fileUploadStatus: fileUploadStatus,
       handleFileDelete: handleFileDelete,
       onFileUpload: onFileUpload,
-      sectionIndex: sectionIndex,
-      customInputMap: customInputMap
+      sectionIndex: sectionIndex
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(_b.Button, {

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

@@ -39,11 +39,9 @@ const Section = _ref => {
     fileUploadStatus,
     handleFileDelete,
     onFileUpload,
-    sectionIndex,
-    customInputMap
+    sectionIndex
     // ...otherProps
   } = _ref;
-  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -55,9 +53,7 @@ const Section = _ref => {
     name: "instructions"
   }), inputs?.map((input, inputIndex) => {
     const isFileInput = input.type === 'file';
-    const isCustomInput = customInputTypes.includes(input.type);
-    const CustomInputComponent = isCustomInput ? customInputMap[input.type].component : null;
-    return !isCustomInput ? /*#__PURE__*/React.createElement(_f.FormInput, _extends({
+    return /*#__PURE__*/React.createElement(_f.FormInput, _extends({
       key: input.name
     }, input, {
       disabled: readOnly
@@ -76,10 +72,6 @@ const Section = _ref => {
         }));
         onFileUpload(filesToUpload);
       }
-    })) : /*#__PURE__*/React.createElement(CustomInputComponent, _extends({
-      key: input.name
-    }, input, {
-      disabled: readOnly
     }));
   }));
 };

package/dist/cjs/utils/formatting.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.snakeCaseToTitleCase = exports.formatTime = exports.formatDate = exports.DATE_FORMATS = void 0;
+const DATE_FORMATS = exports.DATE_FORMATS = {
+  HUMAN_READABLE: 'human_readable',
+  TIME: 'time',
+  DATETIME: 'datetime',
+  CHART_DATE: 'chart_date',
+  CHART_TIME: 'chart_time',
+  WEEKDAY_DATE: 'weekday_date',
+  DAY_VIEW: 'day_view'
+};
+const isValidDate = date => date instanceof Date && !Number.isNaN(date);
+const isTimeSliceFormat = input => {
+  const timeSliceRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
+  return timeSliceRegex.test(input);
+};
+const createTimeFromSlice = timeSlice => {
+  const [hours, minutes] = timeSlice.split(':').map(Number);
+  const date = new Date();
+  date.setHours(hours, minutes, 0, 0);
+  return date;
+};
+const format12Hour = date => {
+  const hour = date.getHours();
+  const ampm = hour >= 12 ? 'PM' : 'AM';
+  const hour12 = hour % 12 || 12;
+  return `${hour12} ${ampm}`;
+};
+const shouldShowYear = date => {
+  const currentYear = new Date().getFullYear();
+  return date.getFullYear() !== currentYear;
+};
+const formatTime = seconds => {
+  if (!seconds) return '0s';
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  const parts = [];
+  if (hours > 0) parts.push(`${hours}h`);
+  if (minutes > 0 || hours > 0 && remainingSeconds > 0) parts.push(`${minutes}m`);
+  if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`);
+
+  // Cater for decimal seconds
+  if (parts.length === 0) return '0s';
+  return parts.join(' ');
+};
+exports.formatTime = formatTime;
+const parseDate = input => {
+  if (input instanceof Date) return input;
+  if (typeof input === 'number') return new Date(input);
+  if (typeof input === 'string') {
+    if (isTimeSliceFormat(input)) {
+      return createTimeFromSlice(input);
+    }
+    const parsed = new Date(input);
+    if (isValidDate(parsed)) return parsed;
+    const timestamp = parseInt(input, 10);
+    if (!Number.isNaN(timestamp)) {
+      const date = new Date(timestamp * 1000);
+      if (isValidDate(date)) return date;
+    }
+  }
+  return null;
+};
+const formatStrategies = {
+  [DATE_FORMATS.CHART_DATE]: date => {
+    const monthDay = date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      timeZone: 'UTC'
+    });
+    return shouldShowYear(date) ? `${monthDay} ${date.getFullYear()}` : monthDay;
+  },
+  [DATE_FORMATS.CHART_TIME]: date => format12Hour(date),
+  [DATE_FORMATS.HUMAN_READABLE]: date => date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC'
+  }),
+  default: date => date.toISOString()
+};
+const formatDate = function (input) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DATE_FORMATS.HUMAN_READABLE;
+  try {
+    if (typeof input === 'string' && isTimeSliceFormat(input)) {
+      if (format === DATE_FORMATS.CHART_TIME || format === DATE_FORMATS.TIME) {
+        const date = createTimeFromSlice(input);
+        if (format === DATE_FORMATS.CHART_TIME) {
+          return format12Hour(date);
+        }
+        return date.toLocaleTimeString('en-US', {
+          hour: '2-digit',
+          minute: '2-digit',
+          timeZone: 'UTC'
+        });
+      }
+      return input;
+    }
+    const date = parseDate(input);
+    if (!date && (typeof input === 'string' || typeof input === 'number')) {
+      return input.toString();
+    }
+    const formatStrategy = formatStrategies[format] || formatStrategies.default;
+    return formatStrategy(date);
+  } catch (error) {
+    return 'Invalid Date';
+  }
+};
+exports.formatDate = formatDate;
+const snakeCaseToTitleCase = word => {
+  const result = word.replace(/([A-Z])/g, ' $1');
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};
+exports.snakeCaseToTitleCase = snakeCaseToTitleCase;

package/dist/cjs/utils/index.js

@@ -3,6 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DATE_FORMATS", {
+  enumerable: true,
+  get: function () {
+    return _formatting.DATE_FORMATS;
+  }
+});
+Object.defineProperty(exports, "formatDate", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatDate;
+  }
+});
+Object.defineProperty(exports, "formatTime", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatTime;
+  }
+});
+Object.defineProperty(exports, "snakeCaseToTitleCase", {
+  enumerable: true,
+  get: function () {
+    return _formatting.snakeCaseToTitleCase;
+  }
+});
 Object.defineProperty(exports, "useDynamicPosition", {
   enumerable: true,
   get: function () {
@@ -21,4 +45,5 @@ Object.defineProperty(exports, "useWindowSize", {
     return _hooks.useWindowSize;
   }
 });
-var _hooks = require("./hooks");
+var _hooks = require("./hooks");
+var _formatting = require("./formatting");