@pareto-engineering/design-system 4.2.0 → 4.2.1

package/src/ui/g/FormBuilder/common/Builder/common/index.js

@@ -1,2 +1,3 @@
 export { Section } from './Section'
 export { InputBuilder } from './InputBuilder'
+export { ActionsContainer } from './ActionsContainer'

package/src/ui/g/FormBuilder/common/Builder/styles.scss

@@ -49,56 +49,13 @@ $default-margin: 1rem;
         flex: .4;
         gap: var(--gap);
 
-        > .#{bem.$base}.select-input {
-          flex: auto;
+        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
+        > span {
+          white-space: nowrap;
         }
-      }
-    }
-    > .#{bem.$base}.section {
-      border-bottom: var(--theme-default-border-style) var(--on-background-inputs);
-
-      > .#{bem.$base}.editor-input {
-        margin-top: $default-margin;
-      }
 
-      > form {
-        /* stylelint-disable selector-max-compound-selectors -- required */
-        > .add-question-cta {
-          align-items: center;
-          background-color: transparent;
-          border: 0;
-          color: var(--hard-interactive);
-          cursor: pointer;
-          display: flex;
-          gap: var(--gap);
-          margin-block: calc($default-margin * 1.5);
-          margin-left: auto;
-          padding: 0;
-          transition: all .2s;
-
-          /* stylelint-disable-next-line max-nesting-depth -- required */
-          &:hover {
-            color: var(--interactive);
-
-            /* stylelint-disable max-nesting-depth -- required */
-            > .icon-container {
-              background-color: var(--interactive);
-            }
-          }
-
-          > .icon-container {
-            align-items: center;
-            background-color: var(--hard-interactive);
-            border-radius: 50%;
-            display: flex;
-            height: 1.6rem;
-            justify-content: center;
-            width: 1.6rem;
-
-            > .icon {
-              color: var(--on-interactive);
-            }
-          }
+        > .#{bem.$base}.select-input {
+          flex: auto;
         }
       }
     }

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

@@ -1,9 +1,9 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react'
 
-import { Formik, Form } from 'formik'
+import { useState, useEffect } from 'react'
 
-import { useState } from 'react'
+import { Formik, Form } from 'formik'
 
 import PropTypes from 'prop-types'
 
@@ -21,6 +21,30 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'renderer'
 
+const reconstructFormDataWithValues = (formData, values) => {
+  const newData = { ...formData }
+  Object.keys(values).forEach((key) => {
+    const [sectionIdx, inputIdx] = key.match(/\d+/g).map(Number)
+    newData.sections[sectionIdx].inputs[inputIdx].value = values[key]
+  })
+  return newData
+}
+
+const validate = (values) => {
+  const errors = {}
+
+  const hasAtLeastOneValue = Object.keys(values).some((valueKey) => {
+    const inputValue = values[valueKey]
+    return inputValue && inputValue !== ''
+  })
+
+  if (!hasAtLeastOneValue) {
+    errors.message = 'At least one input must have a value'
+  }
+
+  return errors
+}
+
 /**
  * This is the component description.
  */
@@ -29,32 +53,41 @@ const Renderer = ({
   className:userClassName,
   style,
   formData,
+  readOnly,
   onSave,
+  onError,
+  shouldSubmit,
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
   const [sectionHistory, setSectionHistory] = useState([])
+  const [updatedFormData, setUpdatedFormData] = useState(formData)
 
-  const initialValues = formData.sections.reduce((acc, section) => {
-    section.inputs.forEach((input) => {
-      acc[input.name] = ''
+  useEffect(() => {
+    setUpdatedFormData(formData)
+  }, [formData])
+
+  const initialValues = formData.sections.reduce((acc, section, sectionIndex) => {
+    section.inputs.forEach((input, inputIndex) => {
+      const inputName = `section_${sectionIndex}_input_${inputIndex}`
+      acc[inputName] = input.value || ''
     })
     return acc
   }, {})
 
   const handleSubmit = (values) => {
-    const currentSection = formData.sections[currentSectionIndex]
+    const currentSection = updatedFormData.sections[currentSectionIndex]
     // by default, 'next' section is the immediate section after the current one
     let nextSectionIndex = currentSectionIndex + 1
 
     // Any other value is either submit or an index to a section
     if (currentSection.navigation.nextSection !== 'next') {
       nextSectionIndex = currentSection.navigation.nextSection === 'submit'
-        ? formData.sections.length // submit
+        ? updatedFormData.sections.length // submit
         : parseInt(currentSection.navigation.nextSection, 10) // go to specific section
     }
 
-    if (nextSectionIndex >= formData.sections.length) {
+    if (nextSectionIndex >= updatedFormData.sections.length) {
       // submit
       onSave(values)
     } else {
@@ -75,6 +108,9 @@ const Renderer = ({
     }
   }
 
+  const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1
+  || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit'
+
   return (
     <div
       id={id}
@@ -91,22 +127,46 @@ const Renderer = ({
       <Formik
         initialValues={initialValues}
         onSubmit={handleSubmit}
+        validate={validate}
       >
-        <Form>
-          {formData.sections.map((section, sectionIndex) => (
-            sectionIndex === currentSectionIndex && (
-            <Section key={`${section.title}`} {...section} />
-            )
-          ))}
-          <div className="navigator-container">
-            <Button color="interactive" isGradient isGhost onClick={handlePrevious} disabled={sectionHistory.length === 0}>
-              Previous
-            </Button>
-            <Button color="interactive" isGradient type="submit">
-              {formData.sections[currentSectionIndex].navigation.nextSection === 'submit' ? 'Submit' : 'Next'}
-            </Button>
-          </div>
-        </Form>
+        {({ values, errors }) => {
+          useEffect(() => {
+            const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values)
+            setUpdatedFormData(formDataWithValues)
+            onSave?.(formDataWithValues)
+          }, [values])
+
+          useEffect(() => {
+            onError?.({ errors, values })
+          }, [errors, values])
+
+          return (
+            <Form>
+              {updatedFormData.sections.map((section, sectionIndex) => (
+                sectionIndex === currentSectionIndex && (
+                <Section key={`${section.title}`} {...section} readOnly={readOnly} />
+                )
+              ))}
+              <div className="navigator-container">
+                <Button
+                  color="interactive"
+                  isGradient
+                  isCompact
+                  isGhost
+                  onClick={handlePrevious}
+                  disabled={sectionHistory.length === 0}
+                >
+                  Previous
+                </Button>
+                {(!isSubmit || shouldSubmit) && (
+                <Button color="interactive" isGradient type="submit">
+                  {isSubmit ? 'Submit' : 'Next'}
+                </Button>
+                )}
+              </div>
+            </Form>
+          )
+        }}
       </Formik>
     </div>
   )
@@ -127,19 +187,10 @@ Renderer.propTypes = {
    * The React-written, css properties for this element.
    */
   style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   *  The children JSX
-   */
-  formData:PropTypes.shape({
-    formTitle      :PropTypes.string.isRequired,
-    formDescription:PropTypes.string.isRequired,
-    sections       :PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
-  }),
 }
 
 Renderer.defaultProps = {
-  // someProp:false
+  // someProp: false,
 }
 
 export default Renderer

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

@@ -25,6 +25,7 @@ const Section = ({
   title,
   description,
   inputs,
+  readOnly,
   // ...otherProps
 }) => (
   <div
@@ -40,13 +41,13 @@ const Section = ({
       .join(' ')}
     style={style}
   >
-    <h3>{title}</h3>
+    <p className="h3">{title}</p>
     <ExpandableLexicalPreview
       nodes={description}
       name="instructions"
     />
     {inputs.map((input) => (
-      <FormInput key={input.name} {...input} />
+      <FormInput key={input.name} {...input} disabled={readOnly} />
     ))}
   </div>
 )

package/src/ui/g/FormBuilder/common/Renderer/styles.scss

@@ -6,10 +6,21 @@ $default-margin: 1rem;
 
 .#{bem.$base}.renderer {
   > form {
+    > .#{bem.$base}.section {
+      margin-bottom: calc($default-margin * 2);
+
+      > p {
+        margin: 0;
+      }
+      > .#{bem.$base}.expandable-lexical-preview {
+        margin-bottom: $default-margin;
+      }
+    }
+
     > .navigator-container {
       display: flex;
       gap: var(--gap);
-      margin-top: $default-margin;
+      justify-content: space-between;
     }
   }
 }