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

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

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

@@ -1,8 +1,8 @@
 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 */
 import * as React from 'react';
+import { useState, useEffect } from 'react';
 import { Formik, Form } from 'formik';
-import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { Button } from "../../../../b";
@@ -13,6 +13,27 @@ import "./styles.scss";
 import { Section } from "./common";
 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.
@@ -22,28 +43,36 @@ const Renderer = ({
   className: userClassName,
   style,
   formData,
-  onSave
+  readOnly,
+  onSave,
+  onError,
+  shouldSubmit
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
   const [sectionHistory, setSectionHistory] = useState([]);
-  const initialValues = formData.sections.reduce((acc, section) => {
-    section.inputs.forEach(input => {
-      acc[input.name] = '';
+  const [updatedFormData, setUpdatedFormData] = useState(formData);
+  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 {
@@ -62,28 +91,49 @@ const Renderer = ({
       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, {
     initialValues: initialValues,
-    onSubmit: handleSubmit
-  }, /*#__PURE__*/React.createElement(Form, null, formData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
-    key: `${section.title}`
-  }, section))), /*#__PURE__*/React.createElement("div", {
-    className: "navigator-container"
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: "interactive",
-    isGradient: true,
-    isGhost: true,
-    onClick: handlePrevious,
-    disabled: sectionHistory.length === 0
-  }, "Previous"), /*#__PURE__*/React.createElement(Button, {
-    color: "interactive",
-    isGradient: true,
-    type: "submit"
-  }, formData.sections[currentSectionIndex].navigation.nextSection === 'submit' ? 'Submit' : 'Next')))));
+    onSubmit: handleSubmit,
+    validate: validate
+  }, ({
+    values,
+    errors
+  }) => {
+    useEffect(() => {
+      const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
+      setUpdatedFormData(formDataWithValues);
+      onSave?.(formDataWithValues);
+    }, [values]);
+    useEffect(() => {
+      onError?.({
+        errors,
+        values
+      });
+    }, [errors, values]);
+    return /*#__PURE__*/React.createElement(Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
+      key: `${section.title}`
+    }, section, {
+      readOnly: readOnly
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "navigator-container"
+    }, /*#__PURE__*/React.createElement(Button, {
+      color: "interactive",
+      isGradient: true,
+      isCompact: true,
+      isGhost: true,
+      onClick: handlePrevious,
+      disabled: sectionHistory.length === 0
+    }, "Previous"), (!isSubmit || shouldSubmit) && /*#__PURE__*/React.createElement(Button, {
+      color: "interactive",
+      isGradient: true,
+      type: "submit"
+    }, isSubmit ? 'Submit' : 'Next')));
+  }));
 };
 Renderer.propTypes = {
   /**
@@ -97,17 +147,9 @@ 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))
-  })
+  style: PropTypes.objectOf(PropTypes.string)
 };
 Renderer.defaultProps = {
-  // someProp:false
+  // someProp: false,
 };
 export default Renderer;

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

@@ -20,18 +20,23 @@ const Section = ({
   style,
   title,
   description,
-  inputs
+  inputs,
+  readOnly
   // ...otherProps
 }) => /*#__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(FormInput, _extends({
   key: input.name
-}, input))));
+}, input, {
+  disabled: readOnly
+}))));
 Section.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.2.0",
+  "version": "4.2.1-alpha.0",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -59,7 +59,7 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^4.1.0",
+    "@pareto-engineering/assets": "^4.2.1-alpha.0",
     "@pareto-engineering/bem": "^4.0.0",
     "@pareto-engineering/styles": "^4.2.0",
     "@pareto-engineering/utils": "^4.0.0",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "7b24b23f9f4b091e2046d21bc0984cf7b7e6c0da"
+  "gitHead": "959e968b733eab6cfef5dca5f8239084afbe2652"
 }