@pareto-engineering/design-system 4.2.0 → 4.2.1-alpha.0

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react'
 
-import { useState, useRef } from 'react'
+import { useState } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -11,14 +11,14 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 import { SelectInput, TextInput } from 'ui/f'
 
-import { ToggleSwitch, Popover } from 'ui/a'
-
-import { useOutsideClick } from 'ui/utils'
+import { ToggleSwitch } from 'ui/a'
 
 import './styles.scss'
 
 // Local Definitions
 
+import { ActionsContainer } from '../ActionsContainer'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'input-builder'
@@ -34,14 +34,13 @@ const InputBuilder = ({
   inputIndex,
   onDelete,
   // onCopy,
-  preferredPopoverOrder,
   // ...otherProps
 }) => {
   const { values, setFieldValue } = useFormikContext()
-  const input = values.sections[sectionIndex].inputs[inputIndex]
+  const input = values.sections[sectionIndex]?.inputs[inputIndex]
 
   const handleToggleRequired = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input.required)
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required)
   }
 
   const toggleSwitchStyles = {
@@ -53,17 +52,15 @@ const InputBuilder = ({
     ),
   }
 
-  const parentRef = useRef(null)
-  const [isOpen, setIsOpen] = useState(false)
-  useOutsideClick(parentRef, () => setIsOpen(false))
-
   const [hasDescription, setHasDescription] = useState(false)
 
-  const handleToggleConditionalNavigation = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`, !input.conditionalNavigation)
-  }
+  // TODO: handle nav logic
+  // const handleToggleConditionalNavigation = () => {
+  //   setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`,
+  // !input?.conditionalNavigation)
+  // }
 
-  const availableSections = values.sections.map((section, idx) => ({
+  const availableSections = values?.sections?.map((section, idx) => ({
     value:idx,
     label:`Go to ${section.title || `Untitled Section ${idx + 1}`}`,
   }))
@@ -116,10 +113,6 @@ const InputBuilder = ({
                 value:'select',
                 label:'Dropdown select',
               },
-              {
-                value:'editor',
-                label:'Editor input',
-              },
               {
                 value:'multiple',
                 label:'Checkboxes',
@@ -149,39 +142,32 @@ const InputBuilder = ({
                 inputId={`sections_${sectionIndex}_inputs.${inputIndex}_toggle`}
               />
             </div>
-            <div className="actions" ref={parentRef}>
-              <button type="button" onClick={() => setIsOpen(!isOpen)}>
-                <span className="icon x-ui-icons c-x">!</span>
-              </button>
-              <Popover
-                isOpen={isOpen}
-                parentRef={parentRef}
-                preferredPrimaryOrder={preferredPopoverOrder}
-              >
-                <p>Show</p>
-                <ul>
-                  <li className={`option ${hasDescription ? 'with-check-mark' : ''}`}>
-                    {hasDescription
+            <ActionsContainer>
+              <p>Show</p>
+              <ul>
+                <li className={`option ${hasDescription ? 'with-check-mark' : ''}`}>
+                  {hasDescription
                      && <span className="x-ui-icons c-x icon">I</span>}
-                    <button
-                      onClick={() => setHasDescription(!hasDescription)}
-                      type="button"
-                    >
-                      Description
-                    </button>
-                  </li>
-                  <li className={`option ${input?.conditionalNavigation ? 'with-check-mark' : ''}`}>
-                    {input?.conditionalNavigation && <span className="x-ui-icons c-x icon">I</span>}
-                    <button
-                      onClick={handleToggleConditionalNavigation}
-                      type="button"
-                    >
-                      Go to section based on answer
-                    </button>
-                  </li>
-                </ul>
-              </Popover>
-            </div>
+                  <button
+                    onClick={() => setHasDescription(!hasDescription)}
+                    type="button"
+                  >
+                    Description
+                  </button>
+                </li>
+                {/* TODO: implement logic */}
+                {/*
+                 <li className={`option ${input?.conditionalNavigation ? 'with-check-mark' : ''}`}>
+                  {input?.conditionalNavigation && <span className="x-ui-icons c-x icon">I</span>}
+                  <button
+                    onClick={handleToggleConditionalNavigation}
+                    type="button"
+                  >
+                    Go to section based on answer
+                  </button>
+                </li> */}
+              </ul>
+            </ActionsContainer>
           </div>
         </div>
         <div className="input-name-description">
@@ -205,7 +191,7 @@ const InputBuilder = ({
                 <p>Options</p>
                 {input?.options.map((option, optionIndex) => (
                   <div key={option.key} className="option-container">
-                    {input.type !== 'select' && <div className={`input-icon-sample ${input.type}`} />}
+                    {input?.type !== 'select' && <div className={`input-icon-sample ${input?.type}`} />}
 
                     <TextInput
                       name={`sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.value`}
@@ -228,7 +214,7 @@ const InputBuilder = ({
                   className="add-option-cta"
                   type="button"
                   onClick={() => push({
-                    key        :`sections-${sectionIndex}-inputs-${inputIndex}-options-${input.options.length - 1}`,
+                    key        :`sections-${sectionIndex}-inputs-${inputIndex}-options-${input?.options.length - 1}`,
                     value      :'',
                     label      :'',
                     nextSection:'',
@@ -264,16 +250,10 @@ InputBuilder.propTypes = {
    * The React-written, css properties for this element.
    */
   style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The preferred primary order of the popover
-   */
-  preferredPopoverOrder:PropTypes.arrayOf(PropTypes.string),
-
 }
 
 InputBuilder.defaultProps = {
-  preferredPopoverOrder:['right', 'bottom', 'left', 'top'],
+  // some properties
 }
 
 export default InputBuilder

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

@@ -54,55 +54,6 @@ $default-list-width: var(--action-button-width, 18rem);
             font-size: calc(var(--s1) * 1rem);
           }
         }
-
-        > .actions {
-          position: relative;
-
-          > button {
-            background-color: transparent;
-            border: 0;
-            cursor: pointer;
-          }
-
-          > .#{bem.$base}.popover {
-            background-color: var(--background-cards);
-            border: var(--theme-default-border-style) var(--main2);
-            border-radius: calc(var(--theme-default-border-radius) / 2);
-            cursor: default;
-            padding: $default-padding;
-            width: $default-list-width;
-
-            > p {
-              margin: 0;
-            }
-
-            > ul {
-              list-style: none;
-              margin: 0;
-              padding: 0;
-              white-space: nowrap;
-
-              > .option {
-                cursor: pointer;
-                padding-block: calc($default-padding / 4);
-
-                &:not(.with-check-mark) {
-                  padding-inline: $default-padding;
-                }
-
-                > button {
-                  background: transparent;
-                  border: 0;
-                  color: var(--paragraph);
-                  cursor: pointer;
-                  font-size: calc(var(--s0) * .875rem);
-                  text-align: left;
-                  width: 100%;
-                }
-              }
-            }
-          }
-        }
       }
     }
 

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

@@ -19,9 +19,13 @@ import { DragAndDrop } from 'ui/g'
 
 import { InputBuilder } from '../InputBuilder'
 
+import { ActionsContainer } from '../ActionsContainer'
+
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
-const componentClassName = 'section'
+const componentClassName = 'builder-section'
 
 /**
  * This is the component description.
@@ -31,6 +35,7 @@ const Section = ({
   className:userClassName,
   style,
   index,
+  handleDeleteSection,
   // ...otherProps
 }) => {
   const { values, setFieldValue } = useFormikContext()
@@ -84,9 +89,26 @@ const Section = ({
         .join(' ')}
       style={style}
     >
-      <p className="h4">
-        {index === 0 ? 'Form title' : `Section ${index + 1}`}
-      </p>
+      <div className="section-header">
+        <p className="h4">
+          {index === 0 ? 'Form title' : `Section ${index + 1}`}
+        </p>
+        {index !== 0 && (
+          <ActionsContainer>
+            <ul>
+              <li className="option">
+                <button
+                  type="button"
+                  className="remove-section-cta"
+                  onClick={handleDeleteSection}
+                >
+                  Delete Section
+                </button>
+              </li>
+            </ul>
+          </ActionsContainer>
+        )}
+      </div>
       <TextInput
         name={`sections.${index}.title`}
         placeholder={`Title of the ${index === 0 ? 'form' : 'section'}`}

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

@@ -0,0 +1,61 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+
+.#{bem.$base}.builder-section {
+  border-bottom: var(--theme-default-border-style) var(--on-background-inputs);
+
+
+  > .section-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  > .#{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;
+
+      &:hover {
+        color: var(--interactive);
+
+        > .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);
+        }
+      }
+    }
+  }
+}
+
+

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;
     }
   }
 }