@pareto-engineering/design-system 4.2.1 → 4.2.3

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

@@ -22,6 +22,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const baseClassName = _exports.default.base;
 const componentClassName = 'input-builder';
+const getToggleSwitchStyles = condition => condition ? {
+  '--slider-background-color': 'var(--disabled)'
+} : {};
 
 /**
  * This is the component description.
@@ -45,11 +48,6 @@ const InputBuilder = _ref => {
   const handleToggleRequired = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
   };
-  const toggleSwitchStyles = {
-    ...(!input?.required ? {
-      '--slider-background-color': 'var(--disabled)'
-    } : {})
-  };
   const [hasDescription, setHasDescription] = (0, _react.useState)(false);
 
   // TODO: handle nav logic
@@ -69,6 +67,10 @@ const InputBuilder = _ref => {
     } = e.target;
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.label`, value);
   };
+  const isFile = input?.type === 'file';
+  const handleToggleShowSpecificFileTypes = () => {
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
+  };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -102,6 +104,9 @@ const InputBuilder = _ref => {
     }, {
       value: 'choices',
       label: 'Radio buttons'
+    }, {
+      value: 'file',
+      label: 'File upload'
     }]
   }), /*#__PURE__*/React.createElement("div", {
     className: "controls"
@@ -117,7 +122,7 @@ const InputBuilder = _ref => {
   }, "Required"), /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
     handleOnChange: handleToggleRequired,
     checked: input?.required,
-    style: toggleSwitchStyles,
+    style: getToggleSwitchStyles(!input?.required),
     inputId: `sections_${sectionIndex}_inputs.${inputIndex}_toggle`
   })), /*#__PURE__*/React.createElement(_ActionsContainer.ActionsContainer, null, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
     className: `option ${hasDescription ? 'with-check-mark' : ''}`
@@ -181,7 +186,29 @@ const InputBuilder = _ref => {
     }, "+")), /*#__PURE__*/React.createElement("span", {
       className: "text x-paragraph c-x"
     }, "Add Option")));
-  })));
+  }), isFile && /*#__PURE__*/React.createElement("div", {
+    className: "input-file-options"
+  }, /*#__PURE__*/React.createElement(_f.TextInput, {
+    label: "Maximum number of files",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.maxCount`,
+    placeholder: "1",
+    type: "number",
+    min: "0",
+    validate: _f.integerAndGreaterThanZero
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "specific-file-types"
+  }, /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
+    handleOnChange: handleToggleShowSpecificFileTypes,
+    checked: input?.showSpecificFileTypes,
+    style: getToggleSwitchStyles(!input?.showSpecificFileTypes),
+    inputId: `sections_${sectionIndex}_inputs.${inputIndex}_show_specific_file_types`
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "s0"
+  }, "Allow only specific file types")), input?.showSpecificFileTypes && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_f.ChoicesInput, {
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.accept`,
+    options: _f.fileUploadOptions,
+    multiple: true
+  })))));
 };
 InputBuilder.propTypes = {
   /**

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/styles.scss

@@ -137,6 +137,17 @@ $default-list-width: var(--action-button-width, 18rem);
         }
       }
     }
+
+    > .input-file-options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+      margin-bottom: $default-margin;
+
+      > .specific-file-types {
+        display: flex;
+      }
+    }
   }
 }
 

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

@@ -22,9 +22,14 @@ const reconstructFormDataWithValues = (formData, values) => {
   const newData = {
     ...formData
   };
-  Object.keys(values).forEach(key => {
+  Object.keys(values).forEach(async key => {
     const [sectionIdx, inputIdx] = key.match(/\d+/g).map(Number);
-    newData.sections[sectionIdx].inputs[inputIdx].value = values[key];
+    if (key.includes('files')) {
+      const files = values[key].map(file => URL.createObjectURL(file));
+      newData.sections[sectionIdx].inputs[inputIdx].files = files;
+    } else {
+      newData.sections[sectionIdx].inputs[inputIdx].value = values[key];
+    }
   });
   return newData;
 };
@@ -125,7 +130,8 @@ const Renderer = _ref => {
     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
+      readOnly: readOnly,
+      setUpdatedFormData: setUpdatedFormData
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, /*#__PURE__*/React.createElement(_b.Button, {

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

@@ -12,7 +12,7 @@ var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports")
 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; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.1.1-alpha.2 */ // Local Definitions
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* eslint-disable no-alert */ /* @pareto-engineering/generator-front 1.1.1-alpha.2 */ // Local Definitions
 const baseClassName = _exports.default.base;
 const componentClassName = 'section';
 
@@ -39,7 +39,7 @@ const Section = _ref => {
   }, title), /*#__PURE__*/React.createElement(_.ExpandableLexicalPreview, {
     nodes: description,
     name: "instructions"
-  }), inputs.map(input => /*#__PURE__*/React.createElement(_f.FormInput, _extends({
+  }), inputs?.map(input => /*#__PURE__*/React.createElement(_f.FormInput, _extends({
     key: input.name
   }, input, {
     disabled: readOnly

package/dist/es/f/FormInput/FormInput.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import * as React from 'react';
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput } from "../fields";
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput, FileUpload } from "../fields";
 import "./styles.scss";
 
 // Local Definitions
@@ -89,6 +89,12 @@ const FormInput = ({
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'file') {
+    return /*#__PURE__*/React.createElement(FileUpload, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({

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

@@ -1 +1,2 @@
-export { lookUpInputValueFromFetchedOptions } from "./lookUpInputValueFromFetchedOptions";
+export { lookUpInputValueFromFetchedOptions } from "./lookUpInputValueFromFetchedOptions";
+export { integerAndGreaterThanZero } from "./validators";

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

@@ -0,0 +1,10 @@
+export 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;
+};

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

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

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

@@ -0,0 +1,218 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useField } from 'formik';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+import { FilePreview } from "./common";
+import { FormLabel, FormDescription } from "../../common";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'file-upload';
+
+/**
+ * This is the component description.
+ */
+const FileUpload = ({
+  id,
+  className: userClassName,
+  style,
+  label,
+  description,
+  accept,
+  multiple,
+  name,
+  disabled,
+  maxCount,
+  maxCountError,
+  maxSize,
+  maxSizeError,
+  onChange,
+  onDelete,
+  // TODO: TBD when connecting with BE
+  // onPreview,
+  // progress,
+  // percent,
+  // uploadStatus,
+  filePreviewAlignment,
+  optional,
+  labelColor,
+  color
+  // ...otherProps
+}) => {
+  const [field,, helpers] = 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 = fileIndex => {
+    const updatedFiles = value.filter((_, i) => i !== fileIndex);
+    setValue(updatedFiles);
+    onDelete?.(fileIndex);
+  };
+  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(FormDescription, {
+    className: "s-1",
+    description: description,
+    name: name
+  }), !disabled && /*#__PURE__*/React.createElement(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) => /*#__PURE__*/React.createElement(FilePreview, {
+    file: file,
+    key: file.name,
+    disabled: disabled,
+    handleDelete: () => handleDelete(indx)
+  })))));
+};
+FileUpload.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The label text for the file input
+   */
+  label: PropTypes.string,
+  /**
+   * The description text below the label
+   */
+  description: PropTypes.string,
+  /**
+   * The color of the text
+   */
+  color: PropTypes.string,
+  /**
+   * The accepted file types (e.g., 'image/*')
+   */
+  accept: PropTypes.string,
+  /**
+   *  Whether to allow multiple file uploads
+   */
+  multiple: PropTypes.bool,
+  /**
+   * The name attribute for the input
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * Whether the the input should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The maximum number of files allowed
+   */
+  maxCount: PropTypes.number,
+  /**
+   * The error message when max count is exceeded
+   */
+  maxCountError: PropTypes.string,
+  /**
+   * The maximum size of files allowed (in bytes)
+   */
+  maxSize: PropTypes.number,
+  /**
+   * The error message when file size exceeds max size
+   */
+  maxSizeError: PropTypes.string,
+  /**
+   * The upload progress value (0-100)
+   */
+  // progress:PropTypes.number,
+
+  /**
+   * The function to handle file change events
+   */
+  onChange: PropTypes.func,
+  /**
+   * The function to handle file delete events
+   */
+  onDelete: PropTypes.func,
+  /**
+   * The function to handle file download events
+   */
+  // onDownload:PropTypes.func,
+
+  /**
+   * The function to handle file preview events
+   */
+  // onPreview:PropTypes.func,
+
+  /**
+   * The upload status of the file if being sent to an external service (e.g., 'uploading', 'done')
+   */
+  // uploadStatus:PropTypes.oneOf(['uploading', 'done', 'failed']),
+
+  /**
+   * The alignment for file previews WRT the upload input
+   */
+  filePreviewAlignment: PropTypes.oneOf(['left', 'right', 'top', 'bottom'])
+};
+FileUpload.defaultProps = {
+  disabled: false,
+  color: 'paragraph',
+  filePreviewAlignment: 'bottom'
+};
+export default FileUpload;

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

@@ -0,0 +1,80 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+
+import "./styles.scss";
+import { ProgressBar } from "../../../../../a";
+import { Button } from "../../../../../b";
+import { fileUploadOptions } from "../../fileUploadOptions";
+const baseClassName = styleNames.base;
+const componentClassName = 'file-preview';
+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';
+};
+
+/**
+ * This is the component description.
+ */
+const FilePreview = ({
+  id,
+  className: userClassName,
+  style,
+  file,
+  disabled,
+  handleDelete
+  // ...otherProps
+}) => {
+  const type = getFileType(file);
+  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(Button, {
+    isCompact: true,
+    isSimple: true,
+    onClick: handleDelete
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "Y"))), !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "progress-status"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "status"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "I"), /*#__PURE__*/React.createElement("span", null, "Uploaded")), /*#__PURE__*/React.createElement(ProgressBar, {
+    color: "green",
+    progress: 100,
+    height: "3px"
+  })));
+};
+FilePreview.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string)
+};
+FilePreview.defaultProps = {
+  // someProp:false
+};
+export default FilePreview;

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+export { default as FilePreview } from "./FilePreview";

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

@@ -0,0 +1,92 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 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;
+      // TODO handle as a prop
+      color: var(--green);
+      display: flex;
+      gap: calc(var(--gap) / 2);
+
+      > .icon {
+        background-color: var(--green);
+        border-radius: 50%;
+        color: var(--on-green);
+        font-size: calc(var(--s-2) * 1rem);
+        padding: calc($default-padding / 4);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+export { FilePreview } from "./FilePreview";

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

@@ -0,0 +1,25 @@
+export const 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'
+}];

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

@@ -0,0 +1,3 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+export { default as FileUpload } from "./FileUpload";
+export { fileUploadOptions } from "./fileUploadOptions";