@pareto-engineering/design-system 4.2.1 → 4.3.0

package/dist/cjs/f/FormInput/FormInput.js

@@ -97,6 +97,12 @@ const FormInput = _ref => {
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'file') {
+    return /*#__PURE__*/React.createElement(_fields.FileUpload, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({

package/dist/cjs/f/common/utils/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "integerAndGreaterThanZero", {
+  enumerable: true,
+  get: function () {
+    return _validators.integerAndGreaterThanZero;
+  }
+});
 Object.defineProperty(exports, "lookUpInputValueFromFetchedOptions", {
   enumerable: true,
   get: function () {
     return _lookUpInputValueFromFetchedOptions.lookUpInputValueFromFetchedOptions;
   }
 });
-var _lookUpInputValueFromFetchedOptions = require("./lookUpInputValueFromFetchedOptions");
+var _lookUpInputValueFromFetchedOptions = require("./lookUpInputValueFromFetchedOptions");
+var _validators = require("./validators");

package/dist/cjs/f/common/utils/validators.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.integerAndGreaterThanZero = void 0;
+const integerAndGreaterThanZero = value => {
+  let error = '';
+  if (value && value <= 0 || value === 0) {
+    error = 'Value must be greator than zero.';
+  }
+  if (value && value % 1 !== 0) {
+    error = 'You must enter a whole number.';
+  }
+  return error;
+};
+exports.integerAndGreaterThanZero = integerAndGreaterThanZero;

package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js

@@ -30,7 +30,8 @@ const Choice = _ref => {
     value,
     multiple,
     validate,
-    disabled
+    disabled,
+    ...otherProps
   } = _ref;
   const type = multiple ? 'checkbox' : 'radio';
   const [field] = (0, _formik.useField)({
@@ -46,7 +47,7 @@ const Choice = _ref => {
     type: type,
     id: id,
     name: name
-  }, field, {
+  }, field, otherProps, {
     value: value,
     disabled: disabled
   })), /*#__PURE__*/React.createElement("label", {

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

@@ -0,0 +1,234 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formik = require("formik");
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+var _common = require("./common");
+var _common2 = require("../../common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'file-upload';
+
+/**
+ * This is the component description.
+ */
+const FileUpload = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    label,
+    description,
+    accept,
+    multiple,
+    name,
+    disabled,
+    maxCount,
+    maxCountError,
+    maxSize,
+    maxSizeError,
+    onChange,
+    uploadStatus,
+    filePreviewAlignment,
+    optional,
+    labelColor,
+    color,
+    viewOnly,
+    handleFileDelete
+    // ...otherProps
+  } = _ref;
+  const [field,, helpers] = (0, _formik.useField)({
+    name
+  });
+  const {
+    value
+  } = field;
+  const {
+    setError,
+    setValue,
+    setTouched
+  } = helpers;
+  const handleChange = event => {
+    setTouched(true, false);
+    const newFiles = Array.from(event.currentTarget.files);
+    const currentFiles = value || [];
+    const currentCount = currentFiles.length + newFiles.length;
+    if (maxCount && currentCount > maxCount) {
+      setError(maxCountError || `Maximum of ${maxCount} files allowed`);
+      return;
+    }
+    const duplicateFiles = newFiles.filter(newFile => currentFiles.some(currentFile => currentFile.name === newFile.name));
+    if (duplicateFiles.length > 0) {
+      setError('You cannot upload the same file twice.');
+      return;
+    }
+    if (maxSize) {
+      const oversizedFiles = newFiles.filter(file => file.size > maxSize);
+      if (oversizedFiles.length > 0) {
+        setError(maxSizeError || `File size exceeds the limit of ${maxSize} bytes`);
+        return;
+      }
+    }
+    const updatedFiles = [...currentFiles, ...newFiles];
+    setValue(updatedFiles);
+    onChange?.(updatedFiles);
+
+    // eslint-disable-next-line no-param-reassign
+    event.target.value = null;
+  };
+  const handleDelete = _ref2 => {
+    let {
+      fileIndex,
+      identifier
+    } = _ref2;
+    const updatedFiles = value?.filter((_, i) => i !== fileIndex);
+    setValue(updatedFiles);
+    handleFileDelete?.({
+      fileIndex,
+      identifier
+    });
+  };
+  const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `preview-${filePreviewAlignment}`, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("p", null, label), /*#__PURE__*/React.createElement(_common2.FormDescription, {
+    className: "s-1",
+    description: description,
+    name: name
+  }), !viewOnly && /*#__PURE__*/React.createElement(_common2.FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+  }, /*#__PURE__*/React.createElement("input", {
+    id: name,
+    className: "file",
+    type: "file",
+    accept: acceptOptions,
+    multiple: multiple || maxCount && maxCount > 0,
+    disabled: disabled,
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon"
+  }, "U"), /*#__PURE__*/React.createElement("span", null, "Attach file")), value?.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "attached-files"
+  }, /*#__PURE__*/React.createElement("p", null, "Attached files:"), /*#__PURE__*/React.createElement("div", {
+    className: "files"
+  }, value.map((file, indx) => {
+    const isFileObject = file instanceof File;
+    return /*#__PURE__*/React.createElement(_common.FilePreview, {
+      file: file,
+      key: isFileObject ? file.name : file,
+      disabled: disabled,
+      handleDelete: () => handleDelete({
+        fileIndex: indx,
+        identifier: isFileObject ? file.name : file?.id
+      }),
+      uploadStatus: uploadStatus?.[file?.name],
+      viewOnly: viewOnly
+    });
+  }))));
+};
+FileUpload.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),
+  /**
+   * The label text for the file input
+   */
+  label: _propTypes.default.string,
+  /**
+   * The description text below the label
+   */
+  description: _propTypes.default.string,
+  /**
+   * The color of the text
+   */
+  color: _propTypes.default.string,
+  /**
+   * The accepted file types (e.g., 'image/*')
+   */
+  accept: _propTypes.default.string,
+  /**
+   *  Whether to allow multiple file uploads
+   */
+  multiple: _propTypes.default.bool,
+  /**
+   * The name attribute for the input
+   */
+  name: _propTypes.default.string.isRequired,
+  /**
+   * Whether the the input should be disabled
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * The maximum number of files allowed
+   */
+  maxCount: _propTypes.default.number,
+  /**
+   * The error message when max count is exceeded
+   */
+  maxCountError: _propTypes.default.string,
+  /**
+   * The maximum size of files allowed (in bytes)
+   */
+  maxSize: _propTypes.default.number,
+  /**
+   * The error message when file size exceeds max size
+   */
+  maxSizeError: _propTypes.default.string,
+  /**
+   * The upload progress value (0-100)
+   */
+  // progress:PropTypes.number,
+
+  /**
+   * The function to handle file change events
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * The function to handle file delete events
+   */
+  handleFileDelete: _propTypes.default.func,
+  /**
+   * The upload status of the file with the file name as the key
+   */
+  uploadStatus: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The alignment for file previews WRT the upload input
+   */
+  filePreviewAlignment: _propTypes.default.oneOf(['left', 'right', 'top', 'bottom']),
+  /**
+   * Whether the file upload is in view only mode
+   */
+  viewOnly: _propTypes.default.bool
+};
+FileUpload.defaultProps = {
+  disabled: false,
+  color: 'paragraph',
+  filePreviewAlignment: 'bottom',
+  viewOnly: false
+};
+var _default = exports.default = FileUpload;

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

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _a = require("../../../../../a");
+require("./styles.scss");
+var _b = require("../../../../../b");
+var _utils = require("../../utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'file-preview';
+const statusColorMap = {
+  pending: 'yellow',
+  error: 'red',
+  success: 'green'
+};
+const FILE_UPLOAD_COMPLETE_PROGRESS = 100;
+
+/**
+ * This is the component description.
+ */
+const FilePreview = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    file,
+    disabled,
+    handleDelete,
+    uploadStatus,
+    color,
+    uploadProgress
+    // ...otherProps
+  } = _ref;
+  const isFileObject = file instanceof File;
+  const type = isFileObject ? (0, _utils.getFileType)(file) : (0, _utils.getFileTypeFromUrl)(file?.url);
+  const status = uploadStatus?.status;
+  const statusColor = statusColorMap[status] ?? color;
+  const isPending = status === 'pending';
+  // isPreview means the file is uploaded and previewed while other files can still be uploaded
+  const isSuccess = status === 'success' || file?.isPreview;
+  const handlePreview = () => {
+    if (!isFileObject) {
+      window.open(file.url, '_blank');
+    }
+  };
+  const canDelete = file?.isPreview || isFileObject;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "identity"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ['type', type.toLowerCase()].filter(e => e).join(' ')
+  }, type), /*#__PURE__*/React.createElement("span", {
+    title: file.name,
+    className: "name"
+  }, file.name), /*#__PURE__*/React.createElement(_b.Button, {
+    isCompact: true,
+    isSimple: true,
+    onClick: () => canDelete ? handleDelete() : handlePreview()
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, canDelete ? 'Y' : '9'))), !disabled && /*#__PURE__*/React.createElement("div", {
+    className: `progress-status x-${statusColor}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "status"
+  }, isPending ? /*#__PURE__*/React.createElement(_a.LoadingCircle, {
+    className: `x-${statusColor}`,
+    heightWidth: "1rem",
+    color: statusColor
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, isSuccess ? 'I' : 'Y'), /*#__PURE__*/React.createElement("span", null, isSuccess ? 'Uploaded' : 'Error'))), /*#__PURE__*/React.createElement(_a.ProgressBar, {
+    color: statusColor,
+    progress: isPending ? uploadProgress : FILE_UPLOAD_COMPLETE_PROGRESS,
+    height: "3px"
+  })));
+};
+FilePreview.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),
+  /**
+   * The base color of the file preview
+   */
+  color: _propTypes.default.string,
+  /**
+   * The upload progress of the file
+   */
+  uploadProgress: _propTypes.default.number
+};
+FilePreview.defaultProps = {
+  color: 'green',
+  uploadProgress: 45
+};
+var _default = exports.default = FilePreview;

package/dist/cjs/f/fields/FileUpload/common/FilePreview/index.js

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

package/dist/cjs/f/fields/FileUpload/common/FilePreview/styles.scss

@@ -0,0 +1,93 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+$files-per-row: 3;
+$total-gaps: $files-per-row - 1;
+$combined-gap: calc(var(--gap) * $total-gaps);
+$width-without-gaps: calc(100% - $combined-gap);
+$default-file-width: calc($width-without-gaps / $files-per-row);
+
+.#{bem.$base}.file-preview {
+  border: var(--theme-default-border-style) var(--ui-lines);
+  border-radius: calc(var(--theme-default-border-radius) / 2);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--gap) / 4);
+  padding: $default-padding;
+  width: $default-file-width;
+
+  > .identity {
+    align-items: center;
+    display: flex;
+    gap: calc(var(--gap) / 2);
+
+    > .type {
+      padding-block: calc($default-padding / 4);
+      padding-inline: calc($default-padding / 2);
+
+      // TODO: update the colors to use variables. These are colors from the new DS
+      &.pdf {
+        background-color: #fdead7;
+        color: #b93814;
+      }
+
+      &.file {
+        background-color: #eef2f6;
+        color: #364151;
+      }
+
+      &.txt {
+        background-color: #d1dfff;
+        color: #004eeb;
+      }
+
+
+      &.vid {
+        background-color: #ebe9fe;
+        color: #5a25dc;
+      }
+
+      &.img {
+        background-color: #cbfbef;
+        color: #107569;
+      }
+
+      &.aud {
+        background-color: #fef7c3;
+        color: #a15c08;
+      }
+    }
+
+    > .name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    > .#{bem.$base}.button {
+      cursor: pointer;
+      margin-left: auto;
+    }
+  }
+
+  > .progress-status {
+    > .status {
+      align-items: center;
+      color: var(--x);
+      display: flex;
+      gap: calc(var(--gap) / 2);
+      margin-bottom: calc($default-margin / 4);
+
+      > .icon {
+        background-color: var(--x);
+        border-radius: 50%;
+        color: var(--on-x);
+        font-size: calc(var(--s-2) * 1rem);
+        padding: calc($default-padding / 4);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FilePreview", {
+  enumerable: true,
+  get: function () {
+    return _FilePreview.FilePreview;
+  }
+});
+var _FilePreview = require("./FilePreview");

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FileUpload", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.default;
+  }
+});
+Object.defineProperty(exports, "fileUploadOptions", {
+  enumerable: true,
+  get: function () {
+    return _utils.fileUploadOptions;
+  }
+});
+Object.defineProperty(exports, "getFileType", {
+  enumerable: true,
+  get: function () {
+    return _utils.getFileType;
+  }
+});
+Object.defineProperty(exports, "getFileTypeFromUrl", {
+  enumerable: true,
+  get: function () {
+    return _utils.getFileTypeFromUrl;
+  }
+});
+var _FileUpload = _interopRequireDefault(require("./FileUpload"));
+var _utils = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,73 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+
+.#{bem.$base}.file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+
+
+  > p {
+    color: var(--y);
+    margin: 0;
+  }
+
+  > .#{bem.$base}.description {
+    height: auto;
+  }
+
+  > .#{bem.$base}.form-label {
+    align-items: center;
+    border: var(--theme-default-border-style) var(--ui-lines);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+    color: var(--heading);
+    cursor: pointer;
+    display: flex;
+    gap: calc(var(--gap) / 2);
+    padding: $default-padding;
+    width: fit-content;
+
+    &:has(>input:disabled) {
+      --icon-color: var(--hard-disabled);
+      color: var(--hard-disabled);
+      cursor: not-allowed;
+    }
+
+    &:has(>input:not(:disabled)) {
+      &:hover,
+      &:active {
+        border: var(--theme-hover-input-border);
+      }
+    }
+
+    > .ai-icon {
+      color: var(--icon-color, var(--interactive));
+      font-size: calc(var(--s2) * 1rem);
+    }
+
+    > input[type="file"] {
+      display: none;
+    }
+  }
+
+  > .attached-files {
+    display: flex;
+    gap: var(--gap);
+
+    > p {
+      margin: 0;
+    }
+
+    > .files {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--gap);
+      width: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFileTypeFromUrl = exports.getFileType = exports.fileUploadOptions = void 0;
+const fileUploadOptions = exports.fileUploadOptions = [{
+  key: 'FILE',
+  value: '.doc,.docx,.odt,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.oasis.opendocument.text',
+  label: 'Documents'
+}, {
+  key: 'TXT',
+  value: '.xls,.xlsx,.ods,.csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.oasis.opendocument.spreadsheet,text/csv',
+  label: 'Spreadsheets'
+}, {
+  key: 'PDF',
+  value: '.pdf,application/pdf',
+  label: 'PDF'
+}, {
+  key: 'VID',
+  value: '.mp4,.ogg,.webm,video/mp4,video/ogg,video/webm',
+  label: 'Videos'
+}, {
+  key: 'IMG',
+  value: '.png,.jpeg,.jpg,.gif,.webp,image/png,image/jpeg,image/gif,image/webp',
+  label: 'Images'
+}, {
+  key: 'AUD',
+  value: '.mp3,.ogg,.wav,audio/mpeg,audio/ogg,audio/wav',
+  label: 'Audio'
+}];
+const getFileType = file => {
+  const mimeType = file?.type;
+  const extension = file?.name?.split('.').pop().toLowerCase();
+  const fileType = fileUploadOptions.find(option => option.value.includes(mimeType) || option.value.includes(extension));
+  return fileType ? fileType.key : 'unknown';
+};
+exports.getFileType = getFileType;
+const getFileTypeFromUrl = url => {
+  const urlWithoutParams = url.split('?')[0];
+  const extension = urlWithoutParams.split('.').pop().toLowerCase();
+  const fileType = fileUploadOptions.find(option => option.value.includes(extension));
+  return fileType ? fileType.key : 'unknown';
+};
+exports.getFileTypeFromUrl = getFileTypeFromUrl;