@pareto-engineering/design-system 4.2.0 → 4.2.1

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

@@ -24,9 +24,15 @@ const FormBuilder = ({
   style,
   mode,
   formData,
+  readOnly,
+  shouldSubmit,
   formBuilderId,
   onBuilderFormSave,
+  onBuilderError,
+  onRendererError,
   onRendererFormSave,
+  onBuilderValidate,
+  initialBuilderValues,
   // ...otherProps
 }) => (
   <div
@@ -43,8 +49,24 @@ const FormBuilder = ({
     style={style}
     // {...otherProps}
   >
-    {mode === 'build' && <Builder formBuilderId={formBuilderId} onSave={onBuilderFormSave} />}
-    {mode === 'render' && <Renderer formData={formData} onSave={onRendererFormSave} />}
+    {mode === 'build' && (
+      <Builder
+        initialValues={initialBuilderValues}
+        formBuilderId={formBuilderId}
+        onSave={onBuilderFormSave}
+        onError={onBuilderError}
+        validate={onBuilderValidate}
+      />
+    )}
+    {mode === 'render' && (
+      <Renderer
+        formData={formData}
+        onSave={onRendererFormSave}
+        readOnly={readOnly}
+        shouldSubmit={shouldSubmit}
+        onError={onRendererError}
+      />
+    )}
   </div>
 )
 
@@ -73,10 +95,35 @@ FormBuilder.propTypes = {
    * This is the ID of the form element in the <Builder /> component
    */
   formBuilderId:PropTypes.string.isRequired,
+
+  /**
+   *  The form data to be used to construct the form builder in renderer mode
+   */
+  formData:PropTypes.shape({
+    sections:PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
+  }),
+
+  /**
+   *  The initial values to instatiate form builder in builder mode
+   */
+  initialBuilderValues:PropTypes.shape({
+    sections:PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
+  }),
+
+  /**
+   * Whether the whole Form in renderer mode should be readOnly
+   */
+  readOnly:PropTypes.bool,
+
+  /**
+   * Whether the form builder in renderer mode should submit the form values itself
+   */
+  shouldSubmit:PropTypes.bool,
 }
 
 FormBuilder.defaultProps = {
-  mode:'build',
+  mode    :'build',
+  readOnly:false,
 }
 
 FormBuilder.Builder = Builder

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

@@ -1,6 +1,8 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react'
 
+import { useEffect } from 'react'
+
 import { Formik, Form, FieldArray } from 'formik'
 
 import PropTypes from 'prop-types'
@@ -38,12 +40,43 @@ const Builder = ({
   className:userClassName,
   style,
   onSave,
+  onError,
+  validate,
   formBuilderId,
+  initialValues = {},
   // ...otherProps
 }) => {
   const handleSubmit = (values) => {
     const reOrderedValues = reorderInputs(values)
-    onSave(reOrderedValues)
+    onSave?.(reOrderedValues)
+  }
+
+  const initialFormState = initialValues?.sections
+    ? initialValues
+    : {
+      sections:[
+        {
+          title              :'',
+          description        :'',
+          key                :'section-0',
+          inputs             :[],
+          orderedInputDragIds:[],
+          navigation         :{ nextSection: 'next' },
+        },
+      ],
+    }
+
+  const handleDeleteSection = ({ index, remove, values }) => {
+    remove(index)
+
+    values.sections.splice(index, 1)
+
+    values.sections.forEach((section, sectionIndex) => {
+      section.inputs.forEach((input, inputIndex) => {
+        // eslint-disable-next-line no-param-reassign
+        input.name = `section_${sectionIndex}_input_${inputIndex}`
+      })
+    })
   }
 
   return (
@@ -61,22 +94,21 @@ const Builder = ({
 
       <p className="h3">Form Builder</p>
       <Formik
-        initialValues={{
-          sections:[
-            {
-              title              :'',
-              description        :'',
-              key                :'section-0',
-              inputs             :[],
-              orderedInputDragIds:[],
-              navigation         :{ nextSection: 'next' },
-            },
-          ],
-        }}
+        initialValues={initialFormState}
         onSubmit={handleSubmit}
+        validate={validate}
       >
-        {({ values }) => {
-          const availableSections = values.sections.map((section, idx) => ({
+        {({ values, errors, setFieldValue }) => {
+          useEffect(() => {
+            const reOrderedValues = reorderInputs(values)
+            onSave?.(reOrderedValues)
+          }, [values])
+
+          useEffect(() => {
+            onError?.(errors)
+          }, [errors, values])
+
+          const availableSections = values?.sections?.map((section, idx) => ({
             value:idx,
             label:`Go to ${section.title || `Untitled Section ${idx + 1}`}`,
           }))
@@ -84,10 +116,16 @@ const Builder = ({
           return (
             <Form id={formBuilderId}>
               <FieldArray name="sections">
-                {({ push }) => (
+                {({ push, remove }) => (
                   <>
-                    {values.sections.map((section, index) => (
-                      <Section key={section.key} index={index} />
+                    {values?.sections?.map((section, index) => (
+                      <Section
+                        key={section.key}
+                        index={index}
+                        handleDeleteSection={() => handleDeleteSection({
+                          index, remove, values, setFieldValue,
+                        })}
+                      />
                     ))}
                     <div className="section-footer">
                       <button

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

@@ -0,0 +1,97 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import { useState, useRef } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+// Local Definitions
+
+import { useOutsideClick } from 'ui/utils'
+
+import { Popover } from 'ui/a'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'actions-container'
+
+/**
+ * This is the component description.
+ */
+const ActionsContainer = ({
+  id,
+  className:userClassName,
+  style,
+  preferredPopoverOrder,
+  children,
+  // ...otherProps
+}) => {
+  const parentRef = useRef(null)
+  const [isOpen, setIsOpen] = useState(false)
+  useOutsideClick(parentRef, () => setIsOpen(false))
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      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}
+      >
+        {children}
+      </Popover>
+    </div>
+  )
+}
+
+ActionsContainer.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 preferred order for the popover
+   */
+  preferredPopoverOrder:PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * The children of the actions container
+   */
+  children:PropTypes.node,
+}
+
+ActionsContainer.defaultProps = {
+  preferredPopoverOrder:['right', 'bottom', 'left', 'top'],
+}
+
+export default ActionsContainer

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

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

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

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+$default-list-width: var(--action-button-width, 18rem);
+
+.#{bem.$base}.actions-container {
+  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;
+        }
+
+        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
+        > 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/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);
+        }
+      }
+    }
+  }
+}
+
+