@pareto-engineering/design-system 4.2.1 → 4.2.3

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
 }
@@ -144,7 +149,12 @@ 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}
+                />
                 )
               ))}
               <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'
 
@@ -46,8 +47,12 @@ 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}
+      />
     ))}
   </div>
 )

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -27478,6 +27478,119 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/FileUpload Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base file-upload preview-bottom y-paragraph"
+  >
+    <p>
+      The file upload 
+    </p>
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="section_0_input_0"
+    >
+      <input
+        accept=".mp4,.ogg,.webm,video/mp4,video/ogg,video/webm,.pdf,application/pdf"
+        className="file"
+        disabled={false}
+        id="section_0_input_0"
+        onChange={[Function]}
+        type="file"
+      />
+      <span
+        className="ai-icon"
+      >
+        U
+      </span>
+      <span>
+        Attach file
+      </span>
+    </label>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/FileUpload Multiple 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base file-upload preview-bottom y-paragraph"
+  >
+    <p>
+      The file upload 
+    </p>
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="section_0_input_0"
+    >
+      <input
+        accept=".mp4,.ogg,.webm,video/mp4,video/ogg,video/webm,.pdf,application/pdf"
+        className="file"
+        disabled={false}
+        id="section_0_input_0"
+        multiple={true}
+        onChange={[Function]}
+        type="file"
+      />
+      <span
+        className="ai-icon"
+      >
+        U
+      </span>
+      <span>
+        Attach file
+      </span>
+    </label>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/FileUpload With Limited Count 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base file-upload preview-bottom y-paragraph"
+  >
+    <p>
+      The file upload 
+    </p>
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="section_0_input_0"
+    >
+      <input
+        accept=".mp4,.ogg,.webm,video/mp4,video/ogg,video/webm,.pdf,application/pdf"
+        className="file"
+        disabled={false}
+        id="section_0_input_0"
+        multiple={true}
+        onChange={[Function]}
+        type="file"
+      />
+      <span
+        className="ai-icon"
+      >
+        U
+      </span>
+      <span>
+        Attach file
+      </span>
+    </label>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/LinkInput Base 1`] = `
 <form
   action="#"
@@ -32643,7 +32756,7 @@ exports[`Storyshots g/FormBuilder Renderer 1`] = `
           <p
             className="h3"
           >
-            This is a survey of some of the best LLM models out there
+            Hello
           </p>
           <div
             className="base expandable-lexical-preview y-paragraph"
@@ -32682,58 +32795,33 @@ exports[`Storyshots g/FormBuilder Renderer 1`] = `
             </button>
           </div>
           <div
-            className="base text-input form-input y-paragraph "
-            style={{}}
+            className="base file-upload form-input preview-bottom y-paragraph"
           >
+            <p>
+              The file upload 
+            </p>
             <label
               className="base form-label x-paragraph"
               htmlFor="section_0_input_0"
             >
-              Name the Model
-            </label>
-            <input
-              className="input"
-              conditionalLogic={null}
-              disabled={false}
-              id="section_0_input_0"
-              name="section_0_input_0"
-              onBlur={[Function]}
-              onChange={[Function]}
-              options={[]}
-              required={true}
-              type="text"
-              value=""
-            />
-          </div>
-          <div
-            className="base text-area-input form-input y-paragraph"
-          >
-            <label
-              className="base form-label x-paragraph"
-              htmlFor="section_0_input_1"
-            >
-              Describe the Model in detail
+              <input
+                accept=".mp4,.ogg,.webm,video/mp4,video/ogg,video/webm,.pdf,application/pdf"
+                className="file"
+                disabled={false}
+                id="section_0_input_0"
+                multiple={true}
+                onChange={[Function]}
+                type="file"
+              />
+              <span
+                className="ai-icon"
+              >
+                U
+              </span>
+              <span>
+                Attach file
+              </span>
             </label>
-            <textarea
-              className="textarea"
-              disabled={false}
-              id="section_0_input_1"
-              name="section_0_input_1"
-              onBlur={[Function]}
-              onChange={[Function]}
-              rows={10}
-              style={
-                {
-                  "resize": "vertical",
-                }
-              }
-              value=""
-            />
-            <div
-              className="base description s-1 x-metadata"
-            >
-              brief model description
-            </div>
           </div>
         </div>
         <div
@@ -32747,12 +32835,6 @@ exports[`Storyshots g/FormBuilder Renderer 1`] = `
           >
             Previous
           </button>
-          <button
-            className="base button x-interactive modifierGradient"
-            type="submit"
-          >
-            Next
-          </button>
         </div>
       </form>
     </div>
@@ -32782,7 +32864,7 @@ exports[`Storyshots g/FormBuilder Renderer With Disabled 1`] = `
           <p
             className="h3"
           >
-            This is a survey of some of the best LLM models out there
+            Hello
           </p>
           <div
             className="base expandable-lexical-preview y-paragraph"
@@ -32821,58 +32903,11 @@ exports[`Storyshots g/FormBuilder Renderer With Disabled 1`] = `
             </button>
           </div>
           <div
-            className="base text-input form-input y-paragraph "
-            style={{}}
+            className="base file-upload form-input preview-bottom y-paragraph"
           >
-            <label
-              className="base form-label x-paragraph"
-              htmlFor="section_0_input_0"
-            >
-              Name the Model
-            </label>
-            <input
-              className="input"
-              conditionalLogic={null}
-              disabled={true}
-              id="section_0_input_0"
-              name="section_0_input_0"
-              onBlur={[Function]}
-              onChange={[Function]}
-              options={[]}
-              required={true}
-              type="text"
-              value=""
-            />
-          </div>
-          <div
-            className="base text-area-input form-input y-paragraph"
-          >
-            <label
-              className="base form-label x-paragraph"
-              htmlFor="section_0_input_1"
-            >
-              Describe the Model in detail
-            </label>
-            <textarea
-              className="textarea"
-              disabled={true}
-              id="section_0_input_1"
-              name="section_0_input_1"
-              onBlur={[Function]}
-              onChange={[Function]}
-              rows={10}
-              style={
-                {
-                  "resize": "vertical",
-                }
-              }
-              value=""
-            />
-            <div
-              className="base description s-1 x-metadata"
-            >
-              brief model description
-            </div>
+            <p>
+              The file upload 
+            </p>
           </div>
         </div>
         <div
@@ -32886,12 +32921,6 @@ exports[`Storyshots g/FormBuilder Renderer With Disabled 1`] = `
           >
             Previous
           </button>
-          <button
-            className="base button x-interactive modifierGradient"
-            type="submit"
-          >
-            Next
-          </button>
         </div>
       </form>
     </div>
@@ -32921,7 +32950,7 @@ exports[`Storyshots g/FormBuilder Renderer With Submit 1`] = `
           <p
             className="h3"
           >
-            This is a survey of some of the best LLM models out there
+            Hello
           </p>
           <div
             className="base expandable-lexical-preview y-paragraph"
@@ -32960,58 +32989,33 @@ exports[`Storyshots g/FormBuilder Renderer With Submit 1`] = `
             </button>
           </div>
           <div
-            className="base text-input form-input y-paragraph "
-            style={{}}
+            className="base file-upload form-input preview-bottom y-paragraph"
           >
+            <p>
+              The file upload 
+            </p>
             <label
               className="base form-label x-paragraph"
               htmlFor="section_0_input_0"
             >
-              Name the Model
-            </label>
-            <input
-              className="input"
-              conditionalLogic={null}
-              disabled={false}
-              id="section_0_input_0"
-              name="section_0_input_0"
-              onBlur={[Function]}
-              onChange={[Function]}
-              options={[]}
-              required={true}
-              type="text"
-              value=""
-            />
-          </div>
-          <div
-            className="base text-area-input form-input y-paragraph"
-          >
-            <label
-              className="base form-label x-paragraph"
-              htmlFor="section_0_input_1"
-            >
-              Describe the Model in detail
+              <input
+                accept=".mp4,.ogg,.webm,video/mp4,video/ogg,video/webm,.pdf,application/pdf"
+                className="file"
+                disabled={false}
+                id="section_0_input_0"
+                multiple={true}
+                onChange={[Function]}
+                type="file"
+              />
+              <span
+                className="ai-icon"
+              >
+                U
+              </span>
+              <span>
+                Attach file
+              </span>
             </label>
-            <textarea
-              className="textarea"
-              disabled={false}
-              id="section_0_input_1"
-              name="section_0_input_1"
-              onBlur={[Function]}
-              onChange={[Function]}
-              rows={10}
-              style={
-                {
-                  "resize": "vertical",
-                }
-              }
-              value=""
-            />
-            <div
-              className="base description s-1 x-metadata"
-            >
-              brief model description
-            </div>
           </div>
         </div>
         <div
@@ -33029,7 +33033,7 @@ exports[`Storyshots g/FormBuilder Renderer With Submit 1`] = `
             className="base button x-interactive modifierGradient"
             type="submit"
           >
-            Next
+            Submit
           </button>
         </div>
       </form>