@pareto-engineering/design-system 4.2.1 → 4.3.0

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

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "EditorInput", {
     return _EditorInput.EditorInput;
   }
 });
+Object.defineProperty(exports, "FileUpload", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUpload;
+  }
+});
 Object.defineProperty(exports, "LinkInput", {
   enumerable: true,
   get: function () {
@@ -69,6 +75,24 @@ Object.defineProperty(exports, "TextareaInput", {
     return _TextareaInput.TextareaInput;
   }
 });
+Object.defineProperty(exports, "fileUploadOptions", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.fileUploadOptions;
+  }
+});
+Object.defineProperty(exports, "getFileType", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.getFileType;
+  }
+});
+Object.defineProperty(exports, "getFileTypeFromUrl", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.getFileTypeFromUrl;
+  }
+});
 var _TextInput = require("./TextInput");
 var _SelectInput = require("./SelectInput");
 var _ChoicesInput = require("./ChoicesInput");
@@ -79,4 +103,5 @@ var _QuerySelect = require("./QuerySelect");
 var _Checkbox = require("./Checkbox");
 var _QueryChoices = require("./QueryChoices");
 var _LinkInput = require("./LinkInput");
-var _EditorInput = require("./EditorInput");
+var _EditorInput = require("./EditorInput");
+var _FileUpload = require("./FileUpload");

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

@@ -37,7 +37,9 @@ const FormBuilder = _ref => {
     onRendererError,
     onRendererFormSave,
     onBuilderValidate,
-    initialBuilderValues
+    initialBuilderValues,
+    fileUploadStatus,
+    handleFileDelete
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -56,7 +58,9 @@ const FormBuilder = _ref => {
     onSave: onRendererFormSave,
     readOnly: readOnly,
     shouldSubmit: shouldSubmit,
-    onError: onRendererError
+    onError: onRendererError,
+    fileUploadStatus: fileUploadStatus,
+    handleFileDelete: handleFileDelete
   }));
 };
 FormBuilder.propTypes = {
@@ -99,7 +103,11 @@ FormBuilder.propTypes = {
   /**
    * Whether the form builder in renderer mode should submit the form values itself
    */
-  shouldSubmit: _propTypes.default.bool
+  shouldSubmit: _propTypes.default.bool,
+  /**
+   * The upload status of files if any
+   */
+  fileUploadStatus: _propTypes.default.objectOf(_propTypes.default.string)
 };
 FormBuilder.defaultProps = {
   mode: 'build',

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;
 };
@@ -52,7 +57,9 @@ const Renderer = _ref => {
     readOnly,
     onSave,
     onError,
-    shouldSubmit
+    shouldSubmit,
+    fileUploadStatus,
+    handleFileDelete
     // ...otherProps
   } = _ref;
   const [currentSectionIndex, setCurrentSectionIndex] = (0, _react.useState)(0);
@@ -125,7 +132,10 @@ 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,
+      fileUploadStatus: fileUploadStatus,
+      handleFileDelete: handleFileDelete
     }))), /*#__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';
 
@@ -27,7 +27,9 @@ const Section = _ref => {
     title,
     description,
     inputs,
-    readOnly
+    readOnly,
+    fileUploadStatus,
+    handleFileDelete
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -39,10 +41,12 @@ 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
+    disabled: readOnly,
+    uploadStatus: fileUploadStatus,
+    handleFileDelete: handleFileDelete
   }))));
 };
 Section.propTypes = {

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,223 @@
+/* @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,
+  uploadStatus,
+  filePreviewAlignment,
+  optional,
+  labelColor,
+  color,
+  viewOnly,
+  handleFileDelete
+  // ...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,
+    identifier
+  }) => {
+    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(FormDescription, {
+    className: "s-1",
+    description: description,
+    name: name
+  }), !viewOnly && /*#__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) => {
+    const isFileObject = file instanceof File;
+    return /*#__PURE__*/React.createElement(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.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
+   */
+  handleFileDelete: PropTypes.func,
+  /**
+   * The upload status of the file with the file name as the key
+   */
+  uploadStatus: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The alignment for file previews WRT the upload input
+   */
+  filePreviewAlignment: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+  /**
+   * Whether the file upload is in view only mode
+   */
+  viewOnly: PropTypes.bool
+};
+FileUpload.defaultProps = {
+  disabled: false,
+  color: 'paragraph',
+  filePreviewAlignment: 'bottom',
+  viewOnly: false
+};
+export default FileUpload;

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

@@ -0,0 +1,108 @@
+/* @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';
+import { LoadingCircle, ProgressBar } from "../../../../../a";
+
+// Local Definitions
+
+import "./styles.scss";
+import { Button } from "../../../../../b";
+import { getFileType, getFileTypeFromUrl } from "../../utils";
+const baseClassName = styleNames.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 = ({
+  id,
+  className: userClassName,
+  style,
+  file,
+  disabled,
+  handleDelete,
+  uploadStatus,
+  color,
+  uploadProgress
+  // ...otherProps
+}) => {
+  const isFileObject = file instanceof File;
+  const type = isFileObject ? getFileType(file) : 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(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(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(ProgressBar, {
+    color: statusColor,
+    progress: isPending ? uploadProgress : FILE_UPLOAD_COMPLETE_PROGRESS,
+    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),
+  /**
+   * The base color of the file preview
+   */
+  color: PropTypes.string,
+  /**
+   * The upload progress of the file
+   */
+  uploadProgress: PropTypes.number
+};
+FilePreview.defaultProps = {
+  color: 'green',
+  uploadProgress: 45
+};
+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";