@pareto-engineering/design-system 4.0.0 → 4.0.1-alpha.1

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/styles.scss

@@ -0,0 +1,192 @@
+/* @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}.input-builder {
+  border: var(--theme-default-border-style) var(--ui-lines);
+  border-radius: calc(var(--theme-default-border-radius) / 2);
+  display: flex;
+  margin-top: $default-margin;
+  padding: $default-padding;
+
+  > .drag-icon {
+    margin-right: $default-margin;
+  }
+
+  > .input-options-container {
+    flex: auto;
+
+    > .controls-container {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $default-margin;
+
+      .#{bem.$base}.select-input {
+        flex: .3;
+      }
+
+      >.controls {
+        display: flex;
+        gap: var(--gap);
+
+        /* stylelint-disable selector-max-compound-selectors -- required */
+        > .is-required {
+          display: flex;
+        }
+
+        /* stylelint-disable selector-max-universal -- required */
+        > * {
+          height: fit-content;
+        }
+
+        > button {
+          background-color: transparent;
+          border: 0;
+          cursor: pointer;
+
+          /* stylelint-disable max-nesting-depth -- required */
+          > .ai-icon,
+          .icon {
+            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%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    > .input-name-description {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+      margin-bottom: $default-margin;
+    }
+
+    > .input-options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+
+      > p {
+        margin: 0;
+      }
+
+      > .option-container {
+        align-items: center;
+        display: flex;
+        gap: calc(var(--gap) / 2);
+
+        > .input-icon-sample {
+          border: var(--theme-default-border-style) var(--outline-inputs);
+          border-radius: var(--theme-default-border-radius);
+          cursor: default;
+          height: 1.6rem;
+          width: 1.6rem;
+
+          &.checkbox {
+            border-radius: calc(var(--theme-default-border-radius) / 4);
+          }
+        }
+
+
+        > .#{bem.$base}.text-input {
+          flex: .5;
+        }
+
+        > .#{bem.$base}.select-input {
+          flex: .3;
+        }
+
+        > button {
+          background-color: transparent;
+          border: 0;
+          color: var(--ui-icons);
+          cursor: pointer;
+        }
+      }
+
+      >.add-option-cta {
+        --color: var(--interactive);
+        --border-color: var(--interactive);
+        align-items: center;
+        align-self: flex-start;
+        background-color: transparent;
+        border: 0;
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        gap: calc(var(--gap) / 1.5);
+        padding: 0;
+        transition: all .2s;
+
+        &:hover {
+          --color: var(--soft-interactive);
+          --border-color: var(--soft-interactive);
+        }
+
+        > .icon-container {
+          align-items: center;
+          border: 2px solid var(--border-color);
+          border-radius: 50%;
+          display: flex;
+          height: 1.6rem;
+          justify-content: center;
+          width: 1.6rem;
+        }
+      }
+    }
+  }
+}
+
+

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

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _formik = require("formik");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _f = require("../../../../../../f");
+var _ = require("../../../../..");
+var _InputBuilder = require("../InputBuilder");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'section';
+
+/**
+ * This is the component description.
+ */
+const Section = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    index
+    // ...otherProps
+  } = _ref;
+  const {
+    values,
+    setFieldValue
+  } = (0, _formik.useFormikContext)();
+  const section = values.sections[index];
+  const handleDeleteInput = inputIndex => {
+    const newInputs = [...section.inputs];
+    newInputs.splice(inputIndex, 1);
+    setFieldValue(`sections.${index}.inputs`, newInputs);
+  };
+  const handleCopyInput = inputIndex => {
+    const inputToCopy = section.inputs[inputIndex];
+    const newInputs = [...section.inputs, {
+      ...inputToCopy,
+      name: `section_${index}_input_${section.inputs.length}`
+    }];
+    setFieldValue(`sections.${index}.inputs`, newInputs);
+  };
+  const [draggableInputs, setDraggableInputs] = (0, _react.useState)([]);
+  const {
+    inputs
+  } = section;
+  (0, _react.useEffect)(() => {
+    const items = inputs.map((input, indx) => ({
+      Content: /*#__PURE__*/React.createElement(_InputBuilder.InputBuilder, {
+        key: input.name,
+        sectionIndex: index,
+        inputIndex: indx,
+        onDelete: handleDeleteInput,
+        onCopy: handleCopyInput
+      }),
+      identifier: input.name
+    }));
+    setDraggableInputs(items);
+  }, [inputs.length, index]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "h4"
+  }, index === 0 ? 'Form title' : `Section ${index + 1}`), /*#__PURE__*/React.createElement(_f.TextInput, {
+    name: `sections.${index}.title`,
+    placeholder: `Title of the ${index === 0 ? 'form' : 'section'}`
+  }), /*#__PURE__*/React.createElement(_f.EditorInput, {
+    name: `sections.${index}.description`,
+    label: `${index === 0 ? 'Form' : 'Section'} description`
+  }), /*#__PURE__*/React.createElement(_formik.FieldArray, {
+    name: `sections.${index}.inputs`
+  }, _ref2 => {
+    let {
+      push
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(_formik.Form, null, /*#__PURE__*/React.createElement(_.DragAndDrop, {
+      items: draggableInputs,
+      onOrderChange: reOrderedItems => {
+        setDraggableInputs(reOrderedItems);
+        const ids = reOrderedItems.map(e => e.identifier);
+        setFieldValue(`sections.${index}.orderedInputDragIds`, ids);
+      },
+      key: draggableInputs.length
+    }), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "add-question-cta",
+      onClick: () => push({
+        name: `section_${index}_input_${section.inputs.length}`,
+        label: '',
+        type: 'text',
+        required: false,
+        options: [],
+        conditionalLogic: null,
+        description: ''
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "icon-container"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "icon "
+    }, "+")), "Add question"));
+  }));
+};
+Section.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string)
+};
+Section.defaultProps = {
+  // someProp:false
+};
+var _default = exports.default = Section;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function () {
+    return _Section.default;
+  }
+});
+var _Section = _interopRequireDefault(require("./Section"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InputBuilder", {
+  enumerable: true,
+  get: function () {
+    return _InputBuilder.InputBuilder;
+  }
+});
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function () {
+    return _Section.Section;
+  }
+});
+var _Section = require("./Section");
+var _InputBuilder = require("./InputBuilder");

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Builder", {
+  enumerable: true,
+  get: function () {
+    return _Builder.default;
+  }
+});
+var _Builder = _interopRequireDefault(require("./Builder"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/g/FormBuilder/common/Builder/styles.scss

@@ -0,0 +1,106 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+
+.#{bem.$base}.builder {
+  > form {
+    > .section-footer {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-top: calc($default-margin * 1.5);
+
+
+      >.add-section-cta {
+        --color: var(--interactive);
+        --border-color: var(--interactive);
+        align-items: center;
+        background-color: transparent;
+        border: 0;
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        gap: calc(var(--gap) / 1.5);
+        padding: 0;
+        transition: all .2s;
+
+        &:hover {
+          --color: var(--soft-interactive);
+          --border-color: var(--soft-interactive);
+        }
+
+        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
+        > .icon-container {
+          align-items: center;
+          border: 2px solid var(--border-color);
+          border-radius: 50%;
+          display: flex;
+          height: 1.6rem;
+          justify-content: center;
+          width: 1.6rem;
+        }
+      }
+
+      > .section-navigation {
+        align-items: center;
+        display: flex;
+        flex: .4;
+        gap: var(--gap);
+
+        > .#{bem.$base}.select-input {
+          flex: auto;
+        }
+      }
+    }
+    > .#{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);
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _formik = require("formik");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _b = require("../../../../b");
+require("./styles.scss");
+var _common = require("./common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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';
+
+/**
+ * This is the component description.
+ */
+const Renderer = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    formData,
+    onSave
+    // ...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] = '';
+    });
+    return acc;
+  }, {});
+  const handleSubmit = values => {
+    const currentSection = formData.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
+      : parseInt(currentSection.navigation.nextSection, 10); // go to specific section
+    }
+    if (nextSectionIndex >= formData.sections.length) {
+      // submit
+      onSave(values);
+    } else {
+      // Record index history to navigate back
+      setSectionHistory([...sectionHistory, currentSectionIndex]);
+      // go to evaluated next section
+      setCurrentSectionIndex(nextSectionIndex);
+    }
+  };
+  const handlePrevious = () => {
+    if (sectionHistory.length > 0) {
+      // get the last index of array(the immediate last section)
+      const previousSectionIndex = sectionHistory.pop();
+      // set the immediate last section indx as current
+      setCurrentSectionIndex(previousSectionIndex);
+      setSectionHistory([...sectionHistory]);
+    }
+  };
+  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')))));
+};
+Renderer.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * 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))
+  })
+};
+Renderer.defaultProps = {
+  // someProp:false
+};
+var _default = exports.default = Renderer;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _f = require("../../../../../../f");
+var _ = require("../../../../..");
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 = 'section';
+
+/**
+ * This is the component description.
+ */
+const Section = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    title,
+    description,
+    inputs
+    // ...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, {
+    nodes: description,
+    name: "instructions"
+  }), inputs.map(input => /*#__PURE__*/React.createElement(_f.FormInput, _extends({
+    key: input.name
+  }, input))));
+};
+Section.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string)
+};
+Section.defaultProps = {
+  // someProp:false
+};
+var _default = exports.default = Section;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function () {
+    return _Section.default;
+  }
+});
+var _Section = _interopRequireDefault(require("./Section"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function () {
+    return _Section.Section;
+  }
+});
+var _Section = require("./Section");