@pareto-engineering/design-system 4.2.0 → 4.2.1

package/dist/es/g/FormBuilder/FormBuilder.js

@@ -19,9 +19,15 @@ const FormBuilder = ({
   style,
   mode,
   formData,
+  readOnly,
+  shouldSubmit,
   formBuilderId,
   onBuilderFormSave,
-  onRendererFormSave
+  onBuilderError,
+  onRendererError,
+  onRendererFormSave,
+  onBuilderValidate,
+  initialBuilderValues
   // ...otherProps
 }) => /*#__PURE__*/React.createElement("div", {
   id: id,
@@ -29,11 +35,17 @@ const FormBuilder = ({
   style: style
   // {...otherProps}
 }, mode === 'build' && /*#__PURE__*/React.createElement(Builder, {
+  initialValues: initialBuilderValues,
   formBuilderId: formBuilderId,
-  onSave: onBuilderFormSave
+  onSave: onBuilderFormSave,
+  onError: onBuilderError,
+  validate: onBuilderValidate
 }), mode === 'render' && /*#__PURE__*/React.createElement(Renderer, {
   formData: formData,
-  onSave: onRendererFormSave
+  onSave: onRendererFormSave,
+  readOnly: readOnly,
+  shouldSubmit: shouldSubmit,
+  onError: onRendererError
 }));
 FormBuilder.propTypes = {
   /**
@@ -55,10 +67,31 @@ FormBuilder.propTypes = {
   /**
    * This is the ID of the form element in the <Builder /> component
    */
-  formBuilderId: PropTypes.string.isRequired
+  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;
 FormBuilder.Renderer = Renderer;

package/dist/es/g/FormBuilder/common/Builder/Builder.js

@@ -1,5 +1,6 @@
 /* @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';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -28,12 +29,41 @@ const Builder = ({
   className: userClassName,
   style,
   onSave,
-  formBuilderId
+  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 /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -42,23 +72,22 @@ const Builder = ({
   }, /*#__PURE__*/React.createElement("p", {
     className: "h3"
   }, "Form Builder"), /*#__PURE__*/React.createElement(Formik, {
-    initialValues: {
-      sections: [{
-        title: '',
-        description: '',
-        key: 'section-0',
-        inputs: [],
-        orderedInputDragIds: [],
-        navigation: {
-          nextSection: 'next'
-        }
-      }]
-    },
-    onSubmit: handleSubmit
+    initialValues: initialFormState,
+    onSubmit: handleSubmit,
+    validate: validate
   }, ({
-    values
+    values,
+    errors,
+    setFieldValue
   }) => {
-    const availableSections = values.sections.map((section, idx) => ({
+    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}`}`
     }));
@@ -67,10 +96,17 @@ const Builder = ({
     }, /*#__PURE__*/React.createElement(FieldArray, {
       name: "sections"
     }, ({
-      push
-    }) => /*#__PURE__*/React.createElement(React.Fragment, null, values.sections.map((section, index) => /*#__PURE__*/React.createElement(Section, {
+      push,
+      remove
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, values?.sections?.map((section, index) => /*#__PURE__*/React.createElement(Section, {
       key: section.key,
-      index: index
+      index: index,
+      handleDeleteSection: () => handleDeleteSection({
+        index,
+        remove,
+        values,
+        setFieldValue
+      })
     })), /*#__PURE__*/React.createElement("div", {
       className: "section-footer"
     }, /*#__PURE__*/React.createElement("button", {

package/dist/es/g/FormBuilder/common/Builder/common/ActionsContainer/ActionsContainer.js

@@ -0,0 +1,70 @@
+/* @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 "../../../../../../utils";
+import { Popover } from "../../../../../../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 /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style,
+    ref: parentRef
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => setIsOpen(!isOpen)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "!")), /*#__PURE__*/React.createElement(Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef,
+    preferredPrimaryOrder: preferredPopoverOrder
+  }, children));
+};
+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/dist/es/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/dist/es/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/dist/es/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js

@@ -1,16 +1,16 @@
 /* @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';
 import { FieldArray, useFormikContext } from 'formik';
 import styleNames from '@pareto-engineering/bem/exports';
 import { SelectInput, TextInput } from "../../../../../../f";
-import { ToggleSwitch, Popover } from "../../../../../../a";
-import { useOutsideClick } from "../../../../../../utils";
+import { ToggleSwitch } from "../../../../../../a";
 import "./styles.scss";
 
 // Local Definitions
 
+import { ActionsContainer } from "../ActionsContainer";
 const baseClassName = styleNames.base;
 const componentClassName = 'input-builder';
 
@@ -23,32 +23,32 @@ const InputBuilder = ({
   style,
   sectionIndex,
   inputIndex,
-  onDelete,
+  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 = {
     ...(!input?.required ? {
       '--slider-background-color': 'var(--disabled)'
     } : {})
   };
-  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);
-  };
-  const availableSections = values.sections.map((section, idx) => ({
+
+  // TODO: handle nav logic
+  // const handleToggleConditionalNavigation = () => {
+  //   setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`,
+  // !input?.conditionalNavigation)
+  // }
+
+  const availableSections = values?.sections?.map((section, idx) => ({
     value: idx,
     label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
   }));
@@ -86,9 +86,6 @@ const InputBuilder = ({
     }, {
       value: 'select',
       label: 'Dropdown select'
-    }, {
-      value: 'editor',
-      label: 'Editor input'
     }, {
       value: 'multiple',
       label: 'Checkboxes'
@@ -112,33 +109,14 @@ const InputBuilder = ({
     checked: input?.required,
     style: toggleSwitchStyles,
     inputId: `sections_${sectionIndex}_inputs.${inputIndex}_toggle`
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "actions",
-    ref: parentRef
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => setIsOpen(!isOpen)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon x-ui-icons c-x"
-  }, "!")), /*#__PURE__*/React.createElement(Popover, {
-    isOpen: isOpen,
-    parentRef: parentRef,
-    preferredPrimaryOrder: preferredPopoverOrder
-  }, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+  })), /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
     className: `option ${hasDescription ? 'with-check-mark' : ''}`
   }, hasDescription && /*#__PURE__*/React.createElement("span", {
     className: "x-ui-icons c-x icon"
   }, "I"), /*#__PURE__*/React.createElement("button", {
     onClick: () => setHasDescription(!hasDescription),
     type: "button"
-  }, "Description")), /*#__PURE__*/React.createElement("li", {
-    className: `option ${input?.conditionalNavigation ? 'with-check-mark' : ''}`
-  }, input?.conditionalNavigation && /*#__PURE__*/React.createElement("span", {
-    className: "x-ui-icons c-x icon"
-  }, "I"), /*#__PURE__*/React.createElement("button", {
-    onClick: handleToggleConditionalNavigation,
-    type: "button"
-  }, "Go to section based on answer"))))))), /*#__PURE__*/React.createElement("div", {
+  }, "Description")))))), /*#__PURE__*/React.createElement("div", {
     className: "input-name-description"
   }, /*#__PURE__*/React.createElement(TextInput, {
     label: "Input name",
@@ -158,8 +136,8 @@ const InputBuilder = ({
   }, /*#__PURE__*/React.createElement("p", null, "Options"), input?.options.map((option, optionIndex) => /*#__PURE__*/React.createElement("div", {
     key: option.key,
     className: "option-container"
-  }, input.type !== 'select' && /*#__PURE__*/React.createElement("div", {
-    className: `input-icon-sample ${input.type}`
+  }, input?.type !== 'select' && /*#__PURE__*/React.createElement("div", {
+    className: `input-icon-sample ${input?.type}`
   }), /*#__PURE__*/React.createElement(TextInput, {
     name: `sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.value`,
     placeholder: `Option ${optionIndex + 1}`,
@@ -179,7 +157,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: ''
@@ -204,13 +182,9 @@ 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)
+  style: PropTypes.objectOf(PropTypes.string)
 };
 InputBuilder.defaultProps = {
-  preferredPopoverOrder: ['right', 'bottom', 'left', 'top']
+  // some properties
 };
 export default InputBuilder;

package/dist/es/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/dist/es/g/FormBuilder/common/Builder/common/Section/Section.js

@@ -10,8 +10,10 @@ import styleNames from '@pareto-engineering/bem/exports';
 import { TextInput, EditorInput } from "../../../../../../f";
 import { DragAndDrop } from "../../../../..";
 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.
@@ -20,7 +22,8 @@ const Section = ({
   id,
   className: userClassName,
   style,
-  index
+  index,
+  handleDeleteSection
   // ...otherProps
 }) => {
   const {
@@ -62,9 +65,17 @@ const Section = ({
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "section-header"
   }, /*#__PURE__*/React.createElement("p", {
     className: "h4"
-  }, index === 0 ? 'Form title' : `Section ${index + 1}`), /*#__PURE__*/React.createElement(TextInput, {
+  }, index === 0 ? 'Form title' : `Section ${index + 1}`), index !== 0 && /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+    className: "option"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "remove-section-cta",
+    onClick: handleDeleteSection
+  }, "Delete Section"))))), /*#__PURE__*/React.createElement(TextInput, {
     name: `sections.${index}.title`,
     placeholder: `Title of the ${index === 0 ? 'form' : 'section'}`
   }), /*#__PURE__*/React.createElement(EditorInput, {

package/dist/es/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/dist/es/g/FormBuilder/common/Builder/common/index.js

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

package/dist/es/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;
         }
       }
     }