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

package/dist/cjs/g/FormBuilder/common/Builder/common/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ActionsContainer", {
+  enumerable: true,
+  get: function () {
+    return _ActionsContainer.ActionsContainer;
+  }
+});
 Object.defineProperty(exports, "InputBuilder", {
   enumerable: true,
   get: function () {
@@ -16,4 +22,5 @@ Object.defineProperty(exports, "Section", {
   }
 });
 var _Section = require("./Section");
-var _InputBuilder = require("./InputBuilder");
+var _InputBuilder = require("./InputBuilder");
+var _ActionsContainer = require("./ActionsContainer");

package/dist/cjs/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/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js

@@ -18,6 +18,27 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.1.1-alpha.2 */ // Local Definitions
 const baseClassName = _exports.default.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.
@@ -28,28 +49,36 @@ const Renderer = _ref => {
     className: userClassName,
     style,
     formData,
-    onSave
+    readOnly,
+    onSave,
+    onError,
+    shouldSubmit
     // ...otherProps
   } = _ref;
   const [currentSectionIndex, setCurrentSectionIndex] = (0, _react.useState)(0);
   const [sectionHistory, setSectionHistory] = (0, _react.useState)([]);
-  const initialValues = formData.sections.reduce((acc, section) => {
-    section.inputs.forEach(input => {
-      acc[input.name] = '';
+  const [updatedFormData, setUpdatedFormData] = (0, _react.useState)(formData);
+  (0, _react.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
+      nextSectionIndex = currentSection.navigation.nextSection === '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 {
@@ -68,28 +97,50 @@ const Renderer = _ref => {
       setSectionHistory([...sectionHistory]);
     }
   };
+  const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1 || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit';
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement(_formik.Formik, {
     initialValues: initialValues,
-    onSubmit: handleSubmit
-  }, /*#__PURE__*/React.createElement(_formik.Form, null, formData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(_common.Section, _extends({
-    key: `${section.title}`
-  }, section))), /*#__PURE__*/React.createElement("div", {
-    className: "navigator-container"
-  }, /*#__PURE__*/React.createElement(_b.Button, {
-    color: "interactive",
-    isGradient: true,
-    isGhost: true,
-    onClick: handlePrevious,
-    disabled: sectionHistory.length === 0
-  }, "Previous"), /*#__PURE__*/React.createElement(_b.Button, {
-    color: "interactive",
-    isGradient: true,
-    type: "submit"
-  }, formData.sections[currentSectionIndex].navigation.nextSection === 'submit' ? 'Submit' : 'Next')))));
+    onSubmit: handleSubmit,
+    validate: validate
+  }, _ref2 => {
+    let {
+      values,
+      errors
+    } = _ref2;
+    (0, _react.useEffect)(() => {
+      const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
+      setUpdatedFormData(formDataWithValues);
+      onSave?.(formDataWithValues);
+    }, [values]);
+    (0, _react.useEffect)(() => {
+      onError?.({
+        errors,
+        values
+      });
+    }, [errors, values]);
+    return /*#__PURE__*/React.createElement(_formik.Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(_common.Section, _extends({
+      key: `${section.title}`
+    }, section, {
+      readOnly: readOnly
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "navigator-container"
+    }, /*#__PURE__*/React.createElement(_b.Button, {
+      color: "interactive",
+      isGradient: true,
+      isCompact: true,
+      isGhost: true,
+      onClick: handlePrevious,
+      disabled: sectionHistory.length === 0
+    }, "Previous"), (!isSubmit || shouldSubmit) && /*#__PURE__*/React.createElement(_b.Button, {
+      color: "interactive",
+      isGradient: true,
+      type: "submit"
+    }, isSubmit ? 'Submit' : 'Next')));
+  }));
 };
 Renderer.propTypes = {
   /**
@@ -103,17 +154,9 @@ Renderer.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   *  The children JSX
-   */
-  formData: _propTypes.default.shape({
-    formTitle: _propTypes.default.string.isRequired,
-    formDescription: _propTypes.default.string.isRequired,
-    sections: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.any))
-  })
+  style: _propTypes.default.objectOf(_propTypes.default.string)
 };
 Renderer.defaultProps = {
-  // someProp:false
+  // someProp: false,
 };
 var _default = exports.default = Renderer;

package/dist/cjs/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -26,19 +26,24 @@ const Section = _ref => {
     style,
     title,
     description,
-    inputs
+    inputs,
+    readOnly
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(_.ExpandableLexicalPreview, {
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "h3"
+  }, title), /*#__PURE__*/React.createElement(_.ExpandableLexicalPreview, {
     nodes: description,
     name: "instructions"
   }), inputs.map(input => /*#__PURE__*/React.createElement(_f.FormInput, _extends({
     key: input.name
-  }, input))));
+  }, input, {
+    disabled: readOnly
+  }))));
 };
 Section.propTypes = {
   /**

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

package/dist/es/f/fields/EditorInput/EditorInput.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
 import { memo, useEffect } from 'react';
-import { useFormikContext } from 'formik';
+import { useField, useFormikContext } from 'formik';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -59,18 +59,16 @@ const EditorInput = ({
   showDebugger,
   stopPropagationKeys,
   setEditorState
-  // handleOnChange,
   // ...otherProps
 }) => {
+  const [field,,] = useField(name);
   const {
-    values,
     setFieldValue
   } = useFormikContext();
   const setInitialValue = () => {
-    const value = values[name];
     try {
-      JSON.parse(value);
-      return value;
+      JSON.parse(field.value);
+      return field.value;
     } catch {
       const defaultValue = {
         root: {
@@ -97,7 +95,7 @@ const EditorInput = ({
           version: 1
         }
       };
-      defaultValue.root.children[0].children[0].text = value;
+      defaultValue.root.children[0].children[0].text = field.value;
       return JSON.stringify(defaultValue);
     }
   };

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