@pareto-engineering/design-system 4.2.1 → 4.3.0

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

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

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/FileUpload/utils.js

@@ -0,0 +1,49 @@
+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',
+  },
+]
+
+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) => {
+  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/src/ui/f/fields/index.js

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

package/src/ui/g/FormBuilder/FormBuilder.jsx

@@ -33,6 +33,8 @@ const FormBuilder = ({
   onRendererFormSave,
   onBuilderValidate,
   initialBuilderValues,
+  fileUploadStatus,
+  handleFileDelete,
   // ...otherProps
 }) => (
   <div
@@ -65,6 +67,8 @@ const FormBuilder = ({
         readOnly={readOnly}
         shouldSubmit={shouldSubmit}
         onError={onRendererError}
+        fileUploadStatus={fileUploadStatus}
+        handleFileDelete={handleFileDelete}
       />
     )}
   </div>
@@ -119,6 +123,11 @@ FormBuilder.propTypes = {
    * Whether the form builder in renderer mode should submit the form values itself
    */
   shouldSubmit:PropTypes.bool,
+
+  /**
+   * The upload status of files if any
+   */
+  fileUploadStatus:PropTypes.objectOf(PropTypes.string),
 }
 
 FormBuilder.defaultProps = {

package/src/ui/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.jsx

@@ -9,7 +9,9 @@ import { FieldArray, useFormikContext } from 'formik'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import { SelectInput, TextInput } from 'ui/f'
+import {
+  ChoicesInput, SelectInput, TextInput, integerAndGreaterThanZero, fileUploadOptions,
+} from 'ui/f'
 
 import { ToggleSwitch } from 'ui/a'
 
@@ -23,6 +25,12 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'input-builder'
 
+const getToggleSwitchStyles = (condition) => (
+  condition
+    ? { '--slider-background-color': 'var(--disabled)' }
+    : {}
+)
+
 /**
  * This is the component description.
  */
@@ -43,15 +51,6 @@ const InputBuilder = ({
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required)
   }
 
-  const toggleSwitchStyles = {
-    ...(!input?.required
-      ? {
-        '--slider-background-color':'var(--disabled)',
-      }
-      : {}
-    ),
-  }
-
   const [hasDescription, setHasDescription] = useState(false)
 
   // TODO: handle nav logic
@@ -72,6 +71,12 @@ const InputBuilder = ({
     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 (
     <div
       id={id}
@@ -121,6 +126,10 @@ const InputBuilder = ({
                 value:'choices',
                 label:'Radio buttons',
               },
+              {
+                value:'file',
+                label:'File upload',
+              },
             ]}
           />
           <div className="controls">
@@ -138,7 +147,7 @@ const InputBuilder = ({
               <ToggleSwitch
                 handleOnChange={handleToggleRequired}
                 checked={input?.required}
-                style={toggleSwitchStyles}
+                style={getToggleSwitchStyles(!input?.required)}
                 inputId={`sections_${sectionIndex}_inputs.${inputIndex}_toggle`}
               />
             </div>
@@ -231,6 +240,39 @@ const InputBuilder = ({
             )}
           </FieldArray>
         )}
+
+        {isFile && (
+          <div className="input-file-options">
+            <TextInput
+              label="Maximum number of files"
+              name={`sections.${sectionIndex}.inputs.${inputIndex}.maxCount`}
+              placeholder="1"
+              type="number"
+              min="0"
+              validate={integerAndGreaterThanZero}
+            />
+            <div className="specific-file-types">
+              <ToggleSwitch
+                handleOnChange={handleToggleShowSpecificFileTypes}
+                checked={input?.showSpecificFileTypes}
+                style={getToggleSwitchStyles(!input?.showSpecificFileTypes)}
+                inputId={`sections_${sectionIndex}_inputs.${inputIndex}_show_specific_file_types`}
+              />
+              <span className="s0">
+                Allow only specific file types
+              </span>
+            </div>
+            {input?.showSpecificFileTypes && (
+              <>
+                <ChoicesInput
+                  name={`sections.${sectionIndex}.inputs.${inputIndex}.accept`}
+                  options={fileUploadOptions}
+                  multiple
+                />
+              </>
+            )}
+          </div>
+        )}
       </div>
     </div>
   )

package/src/ui/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/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx

@@ -23,9 +23,14 @@ const componentClassName = 'renderer'
 
 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
 }
@@ -57,6 +62,8 @@ const Renderer = ({
   onSave,
   onError,
   shouldSubmit,
+  fileUploadStatus,
+  handleFileDelete,
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
@@ -144,7 +151,14 @@ const Renderer = ({
             <Form>
               {updatedFormData.sections.map((section, sectionIndex) => (
                 sectionIndex === currentSectionIndex && (
-                <Section key={`${section.title}`} {...section} readOnly={readOnly} />
+                <Section
+                  key={`${section.title}`}
+                  {...section}
+                  readOnly={readOnly}
+                  setUpdatedFormData={setUpdatedFormData}
+                  fileUploadStatus={fileUploadStatus}
+                  handleFileDelete={handleFileDelete}
+                />
                 )
               ))}
               <div className="navigator-container">

package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-alert */
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react'
 
@@ -26,6 +27,8 @@ const Section = ({
   description,
   inputs,
   readOnly,
+  fileUploadStatus,
+  handleFileDelete,
   // ...otherProps
 }) => (
   <div
@@ -46,8 +49,14 @@ const Section = ({
       nodes={description}
       name="instructions"
     />
-    {inputs.map((input) => (
-      <FormInput key={input.name} {...input} disabled={readOnly} />
+    {inputs?.map((input) => (
+      <FormInput
+        key={input.name}
+        {...input}
+        disabled={readOnly}
+        uploadStatus={fileUploadStatus}
+        handleFileDelete={handleFileDelete}
+      />
     ))}
   </div>
 )