@pareto-engineering/design-system 4.2.1 → 4.2.3

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

@@ -0,0 +1,277 @@
+/* @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 (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `preview-${filePreviewAlignment}`,
+        `y-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <p>{label}</p>
+      <FormDescription className="s-1" description={description} name={name} />
+      {!disabled && (
+        <FormLabel
+          name={name}
+          color={labelColor}
+          optional={optional}
+        >
+          <input
+            id={name}
+            className="file"
+            type="file"
+            accept={acceptOptions}
+            multiple={multiple || (maxCount && maxCount > 0)}
+            disabled={disabled}
+            onChange={handleChange}
+          />
+          <span className="ai-icon">
+            U
+          </span>
+          <span>
+            Attach file
+          </span>
+        </FormLabel>
+      )}
+      {value?.length > 0 && (
+        <div className="attached-files">
+          <p>Attached files:</p>
+          <div className="files">
+            {value.map((file, indx) => (
+              <FilePreview
+                file={file}
+                key={file.name}
+                disabled={disabled}
+                handleDelete={() => handleDelete(indx)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+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/src/ui/f/fields/FileUpload/common/FilePreview/FilePreview.jsx

@@ -0,0 +1,115 @@
+/* @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 'ui/a'
+
+import { Button } from 'ui/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 (
+    <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>
+        <Button isCompact isSimple onClick={handleDelete}>
+          <span className="icon x-ui-icons c-x">Y</span>
+        </Button>
+      </div>
+      {!disabled && (
+        <div className="progress-status">
+          <div className="status">
+            <span className="icon">I</span>
+            <span>Uploaded</span>
+          </div>
+          <ProgressBar
+            color="green"
+            progress={100}
+            height="3px"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+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/src/ui/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/src/ui/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/src/ui/f/fields/FileUpload/common/index.js

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

package/src/ui/f/fields/FileUpload/fileUploadOptions.js

@@ -0,0 +1,32 @@
+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/src/ui/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'

package/src/ui/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/src/ui/f/fields/index.js

@@ -9,3 +9,4 @@ export { Checkbox } from './Checkbox'
 export { QueryChoices } from './QueryChoices'
 export { LinkInput } from './LinkInput'
 export { EditorInput } from './EditorInput'
+export { FileUpload, fileUploadOptions } from './FileUpload'