@pareto-engineering/design-system 4.2.3 → 4.3.2

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

@@ -0,0 +1,119 @@
+/* @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, Tooltip } 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 Preview = ({
+  id,
+  className: userClassName,
+  style,
+  file,
+  handleDelete,
+  uploadStatus,
+  color,
+  uploadProgress,
+  writeOnly
+  // ...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;
+  const isFileBroken = !writeOnly && !file?.url;
+  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), isFileBroken ? /*#__PURE__*/React.createElement(Tooltip, {
+    description: "bulk-updates-text",
+    content: /*#__PURE__*/React.createElement("p", null, "This file doesn't have a link or the link is invalid.")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "h")) : /*#__PURE__*/React.createElement(Button, {
+    color: "ui-icons",
+    isCompact: true,
+    isSimple: true,
+    onClick: () => canDelete ? handleDelete() : handlePreview()
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, canDelete ? 'Y' : '9'))), writeOnly && /*#__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"
+  })));
+};
+Preview.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,
+  /**
+   * Whether the preview is used in a context where the user can upload new files
+   */
+  writeOnly: PropTypes.bool
+};
+Preview.defaultProps = {
+  color: 'green',
+  uploadProgress: 45
+};
+export default Preview;

package/dist/es/f/fields/FileUpload/common/{FilePreview → Preview}/index.js

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

package/dist/{cjs/f/fields/FileUpload/common/FilePreview → es/f/fields/FileUpload/common/Preview}/styles.scss

@@ -3,6 +3,7 @@
 @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);
@@ -22,13 +23,16 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     align-items: center;
     display: flex;
     gap: calc(var(--gap) / 2);
+    justify-content: space-between;
 
     > .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 {
+      &.pdf,
+      &.broken,
+      &.unknown {
         background-color: #fdead7;
         color: #b93814;
       }
@@ -67,7 +71,6 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     }
 
     > .#{bem.$base}.button {
-      cursor: pointer;
       margin-left: auto;
     }
   }
@@ -75,15 +78,15 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
   > .progress-status {
     > .status {
       align-items: center;
-      // TODO handle as a prop
-      color: var(--green);
+      color: var(--x);
       display: flex;
       gap: calc(var(--gap) / 2);
+      margin-bottom: calc($default-margin / 4);
 
       > .icon {
-        background-color: var(--green);
+        background-color: var(--x);
         border-radius: 50%;
-        color: var(--on-green);
+        color: var(--on-x);
         font-size: calc(var(--s-2) * 1rem);
         padding: calc($default-padding / 4);
       }

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

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

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

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

package/dist/es/f/fields/FileUpload/{fileUploadOptions.js → utils.js}

@@ -22,4 +22,19 @@ export const fileUploadOptions = [{
   key: 'AUD',
   value: '.mp3,.ogg,.wav,audio/mpeg,audio/ogg,audio/wav',
   label: 'Audio'
-}];
+}];
+export 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';
+};
+export const getFileTypeFromUrl = url => {
+  if (!url) {
+    return 'BROKEN';
+  }
+  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';
+};

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

@@ -9,4 +9,4 @@ export { Checkbox } from "./Checkbox";
 export { QueryChoices } from "./QueryChoices";
 export { LinkInput } from "./LinkInput";
 export { EditorInput } from "./EditorInput";
-export { FileUpload, fileUploadOptions } from "./FileUpload";
+export { FileUpload, fileUploadOptions, getFileType, getFileTypeFromUrl } from "./FileUpload";

package/dist/es/g/FormBuilder/FormBuilder.js

@@ -27,7 +27,9 @@ const FormBuilder = ({
   onRendererError,
   onRendererFormSave,
   onBuilderValidate,
-  initialBuilderValues
+  initialBuilderValues,
+  fileUploadStatus,
+  handleFileDelete
   // ...otherProps
 }) => /*#__PURE__*/React.createElement("div", {
   id: id,
@@ -45,7 +47,9 @@ const FormBuilder = ({
   onSave: onRendererFormSave,
   readOnly: readOnly,
   shouldSubmit: shouldSubmit,
-  onError: onRendererError
+  onError: onRendererError,
+  fileUploadStatus: fileUploadStatus,
+  handleFileDelete: handleFileDelete
 }));
 FormBuilder.propTypes = {
   /**
@@ -87,7 +91,11 @@ FormBuilder.propTypes = {
   /**
    * Whether the form builder in renderer mode should submit the form values itself
    */
-  shouldSubmit: PropTypes.bool
+  shouldSubmit: PropTypes.bool,
+  /**
+   * The upload status of files if any
+   */
+  fileUploadStatus: PropTypes.objectOf(PropTypes.string)
 };
 FormBuilder.defaultProps = {
   mode: 'build',

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

@@ -51,7 +51,9 @@ const Renderer = ({
   readOnly,
   onSave,
   onError,
-  shouldSubmit
+  shouldSubmit,
+  fileUploadStatus,
+  handleFileDelete
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
@@ -124,7 +126,9 @@ const Renderer = ({
       key: `${section.title}`
     }, section, {
       readOnly: readOnly,
-      setUpdatedFormData: setUpdatedFormData
+      setUpdatedFormData: setUpdatedFormData,
+      fileUploadStatus: fileUploadStatus,
+      handleFileDelete: handleFileDelete
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, /*#__PURE__*/React.createElement(Button, {

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

@@ -22,7 +22,9 @@ const Section = ({
   title,
   description,
   inputs,
-  readOnly
+  readOnly,
+  fileUploadStatus,
+  handleFileDelete
   // ...otherProps
 }) => /*#__PURE__*/React.createElement("div", {
   id: id,
@@ -36,7 +38,9 @@ const Section = ({
 }), inputs?.map(input => /*#__PURE__*/React.createElement(FormInput, _extends({
   key: input.name
 }, input, {
-  disabled: readOnly
+  disabled: readOnly,
+  uploadStatus: fileUploadStatus,
+  handleFileDelete: handleFileDelete
 }))));
 Section.propTypes = {
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.2.3",
+  "version": "4.3.2",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "77c5790a1e998600f0f61931a8fcbd2177f53efc"
+  "gitHead": "6e334c8fc47b8d7fc8448c25a587a5b059085a32"
 }

package/src/stories/f/FileUpload.stories.jsx

@@ -53,3 +53,16 @@ export const WithLimitedCount = {
     maxCount:2,
   },
 }
+
+const file = {
+  id       :'101568dad8544564901830661183e281',
+  name     :'test.tar',
+  url      :'https://forte-development-assets.pareto.ai/task/73/101568dad8544564901830661183e281.tar?Expires=1725387927&Signature=D8wIYnCQKyS6kkZbumgHHJ8fXnciwz1f31YGpKUH47InfPFDqGTDpEDub4xsjDPlxlDWomNj05xJs~uiaef49ZuRnPKRgcUFzw86Pn9A81Rw5gawfmuIpJPaUIkhG6VpsmH5pKnnEX2jWb0t5OqD~jMiL1aQU8f7HS241E9qdLy1kG9BHAHYR8IxSz9mHeZD3k~cjVW3I4QtB1PuN3nOgLH1ebBHI0Y1bk6kyVT1Bihz0bpbdg6o5KkoV6DKqLUGbsxvYliWOX8XCjkoDujtl8hDnTFS6Hix75a9idf3qVbTA7IDhoGodzVRw8MbyIHashxQ5-5XRF0mAblJr~2QTQ__&Key-Pair-Id=K3IY7IU3GPUR0N',
+  writeOnly:false,
+}
+
+export const Preview = {
+  render:() => (
+    <FileUpload.Preview file={file} />
+  ),
+}

package/src/ui/f/fields/FileUpload/FileUpload.jsx

@@ -9,7 +9,7 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 import './styles.scss'
 
-import { FilePreview } from './common'
+import { Preview } from './common'
 
 import { FormLabel, FormDescription } from '../../common'
 
@@ -37,16 +37,13 @@ const FileUpload = ({
   maxSize,
   maxSizeError,
   onChange,
-  onDelete,
-  // TODO: TBD when connecting with BE
-  // onPreview,
-  // progress,
-  // percent,
-  // uploadStatus,
+  uploadStatus,
   filePreviewAlignment,
   optional,
   labelColor,
   color,
+  viewOnly,
+  handleFileDelete,
   // ...otherProps
 }) => {
   const [field, , helpers] = useField({ name })
@@ -92,11 +89,11 @@ const FileUpload = ({
     event.target.value = null
   }
 
-  const handleDelete = (fileIndex) => {
-    const updatedFiles = value.filter((_, i) => i !== fileIndex)
+  const handleDelete = ({ fileIndex, identifier }) => {
+    const updatedFiles = value?.filter((_, i) => i !== fileIndex)
     setValue(updatedFiles)
 
-    onDelete?.(fileIndex)
+    handleFileDelete?.({ fileIndex, identifier })
   }
 
   const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept
@@ -119,7 +116,7 @@ const FileUpload = ({
     >
       <p>{label}</p>
       <FormDescription className="s-1" description={description} name={name} />
-      {!disabled && (
+      {!viewOnly && (
         <FormLabel
           name={name}
           color={labelColor}
@@ -147,11 +144,15 @@ const FileUpload = ({
           <p>Attached files:</p>
           <div className="files">
             {value.map((file, indx) => (
-              <FilePreview
+              <Preview
                 file={file}
                 key={file.name}
-                disabled={disabled}
-                handleDelete={() => handleDelete(indx)}
+                writeOnly={!disabled}
+                handleDelete={() => handleDelete({
+                  fileIndex :indx,
+                  identifier:file?.id || file.name,
+                })}
+                uploadStatus={uploadStatus?.[file?.name]}
               />
             ))}
           </div>
@@ -245,33 +246,31 @@ FileUpload.propTypes = {
   /**
    * The function to handle file delete events
    */
-  onDelete:PropTypes.func,
+  handleFileDelete:PropTypes.func,
 
   /**
-   * The function to handle file download events
+   * The upload status of the file with the file name as the key
    */
-  // onDownload:PropTypes.func,
+  uploadStatus:PropTypes.objectOf(PropTypes.string),
 
   /**
-   * 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')
+   * The alignment for file previews WRT the upload input
    */
-  // uploadStatus:PropTypes.oneOf(['uploading', 'done', 'failed']),
+  filePreviewAlignment:PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
 
   /**
-   * The alignment for file previews WRT the upload input
+   * Whether the file upload is in view only mode
    */
-  filePreviewAlignment:PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+  viewOnly:PropTypes.bool,
 }
 
 FileUpload.defaultProps = {
   disabled            :false,
   color               :'paragraph',
   filePreviewAlignment:'bottom',
+  viewOnly            :false,
 }
 
+FileUpload.Preview = Preview
+
 export default FileUpload

package/src/ui/f/fields/FileUpload/common/Preview/Preview.jsx

@@ -0,0 +1,185 @@
+/* @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, Tooltip } from 'ui/a'
+
+// Local Definitions
+
+import './styles.scss'
+
+import { Button } from 'ui/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 Preview = ({
+  id,
+  className:userClassName,
+  style,
+  file,
+  handleDelete,
+  uploadStatus,
+  color,
+  uploadProgress,
+  writeOnly,
+  // ...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
+
+  const isFileBroken = !writeOnly && !file?.url
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <div className="identity">
+        <span
+          className={
+            [
+              'type',
+              type.toLowerCase(),
+            ]
+              .filter((e) => e)
+              .join(' ')
+}
+        >
+          {type}
+        </span>
+        <span title={file.name} className="name">{file.name}</span>
+        {isFileBroken
+          ? (
+            <Tooltip
+              description="bulk-updates-text"
+              content={(
+                <p>
+                  This file doesn&apos;t have a link or the link is invalid.
+                </p>
+              )}
+            >
+              <span className="icon x-ui-icons c-x">
+                h
+              </span>
+            </Tooltip>
+          )
+          : (
+            <Button
+              color="ui-icons"
+              isCompact
+              isSimple
+              onClick={() => (canDelete ? handleDelete() : handlePreview())}
+            >
+              <span className="icon">{canDelete ? 'Y' : '9'}</span>
+            </Button>
+          )}
+      </div>
+      {writeOnly && (
+        <div className={`progress-status x-${statusColor}`}>
+          <div className="status">
+            {isPending ? (
+              <LoadingCircle
+                className={`x-${statusColor}`}
+                heightWidth="1rem"
+                color={statusColor}
+              />
+            ) : (
+              <>
+                <span className="icon">
+                  {isSuccess ? 'I' : 'Y'}
+                </span>
+                <span>{isSuccess ? 'Uploaded' : 'Error'}</span>
+              </>
+            )}
+          </div>
+          <ProgressBar
+            color={statusColor}
+            progress={isPending ? uploadProgress : FILE_UPLOAD_COMPLETE_PROGRESS}
+            height="3px"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+Preview.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,
+
+  /**
+   * Whether the preview is used in a context where the user can upload new files
+   */
+  writeOnly:PropTypes.bool,
+}
+
+Preview.defaultProps = {
+  color         :'green',
+  uploadProgress:45,
+}
+
+export default Preview

package/src/ui/f/fields/FileUpload/common/{FilePreview → Preview}/index.js

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

package/{dist/es/f/fields/FileUpload/common/FilePreview → src/ui/f/fields/FileUpload/common/Preview}/styles.scss

@@ -3,6 +3,7 @@
 @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);
@@ -22,13 +23,16 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     align-items: center;
     display: flex;
     gap: calc(var(--gap) / 2);
+    justify-content: space-between;
 
     > .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 {
+      &.pdf,
+      &.broken,
+      &.unknown {
         background-color: #fdead7;
         color: #b93814;
       }
@@ -67,7 +71,6 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     }
 
     > .#{bem.$base}.button {
-      cursor: pointer;
       margin-left: auto;
     }
   }
@@ -75,15 +78,15 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
   > .progress-status {
     > .status {
       align-items: center;
-      // TODO handle as a prop
-      color: var(--green);
+      color: var(--x);
       display: flex;
       gap: calc(var(--gap) / 2);
+      margin-bottom: calc($default-margin / 4);
 
       > .icon {
-        background-color: var(--green);
+        background-color: var(--x);
         border-radius: 50%;
-        color: var(--on-green);
+        color: var(--on-x);
         font-size: calc(var(--s-2) * 1rem);
         padding: calc($default-padding / 4);
       }