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

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

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _formik = require("formik");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _f = require("../../../../f");
+var _common = require("./common");
+require("./styles.scss");
+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 = 'builder';
+const reorderInputs = values => {
+  const valuesCopy = JSON.parse(JSON.stringify(values));
+  valuesCopy.sections.forEach(section => {
+    const orderMap = new Map();
+    section.orderedInputDragIds.forEach((id, index) => orderMap.set(id, index));
+    section.inputs.sort((a, b) => orderMap.get(a.name) - orderMap.get(b.name));
+  });
+  return valuesCopy;
+};
+
+/**
+ */
+const Builder = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    onSave,
+    formBuilderId
+    // ...otherProps
+  } = _ref;
+  const handleSubmit = values => {
+    const reOrderedValues = reorderInputs(values);
+    onSave(reOrderedValues);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "h3"
+  }, "Form Builder"), /*#__PURE__*/React.createElement(_formik.Formik, {
+    initialValues: {
+      sections: [{
+        title: '',
+        description: '',
+        key: 'section-0',
+        inputs: [],
+        orderedInputDragIds: [],
+        navigation: {
+          nextSection: 'next'
+        }
+      }]
+    },
+    onSubmit: handleSubmit
+  }, _ref2 => {
+    let {
+      values
+    } = _ref2;
+    const availableSections = values.sections.map((section, idx) => ({
+      value: idx,
+      label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
+    }));
+    return /*#__PURE__*/React.createElement(_formik.Form, {
+      id: formBuilderId
+    }, /*#__PURE__*/React.createElement(_formik.FieldArray, {
+      name: "sections"
+    }, _ref3 => {
+      let {
+        push
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, values.sections.map((section, index) => /*#__PURE__*/React.createElement(_common.Section, {
+        key: section.key,
+        index: index
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "section-footer"
+      }, /*#__PURE__*/React.createElement("button", {
+        className: "add-section-cta",
+        type: "button",
+        onClick: () => {
+          const currentIndex = values.sections.length;
+          return push({
+            title: '',
+            description: '',
+            key: `section-${currentIndex}`,
+            inputs: [{
+              type: 'text',
+              options: [],
+              required: true,
+              description: '',
+              name: `section_${values.sections.length}_input_0`,
+              label: ''
+            }],
+            orderedInputDragIds: [],
+            navigation: {
+              nextSection: 'next'
+            }
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "icon-container"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "icon"
+      }, "+")), /*#__PURE__*/React.createElement("span", {
+        className: "text x-paragraph c-x"
+      }, "Add Section")), /*#__PURE__*/React.createElement("div", {
+        className: "section-navigation"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "x-paragraph c-x"
+      }, "After Section", ' ', values.sections.length), /*#__PURE__*/React.createElement(_f.SelectInput, {
+        name: `sections.${values.sections.length - 1}.navigation.nextSection`,
+        options: [{
+          label: 'Select section',
+          value: '',
+          disabled: true
+        }, {
+          label: 'Continue to next section',
+          value: 'next'
+        }, ...availableSections, {
+          label: 'Submit form',
+          value: 'submit'
+        }]
+      }))));
+    }));
+  }));
+};
+Builder.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)
+};
+Builder.defaultProps = {
+  // someProp:false
+};
+var _default = exports.default = Builder;

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

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formik = require("formik");
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _f = require("../../../../../../f");
+var _a = require("../../../../../../a");
+var _utils = require("../../../../../../utils");
+require("./styles.scss");
+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 = 'input-builder';
+
+/**
+ * This is the component description.
+ */
+const InputBuilder = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    sectionIndex,
+    inputIndex,
+    onDelete,
+    // onCopy,
+    preferredPopoverOrder
+    // ...otherProps
+  } = _ref;
+  const {
+    values,
+    setFieldValue
+  } = (0, _formik.useFormikContext)();
+  const input = values.sections[sectionIndex].inputs[inputIndex];
+  const handleToggleRequired = () => {
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input.required);
+  };
+  const toggleSwitchStyles = {
+    ...(!input?.required ? {
+      '--slider-background-color': 'var(--disabled)'
+    } : {})
+  };
+  const parentRef = (0, _react.useRef)(null);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  (0, _utils.useOutsideClick)(parentRef, () => setIsOpen(false));
+  const [hasDescription, setHasDescription] = (0, _react.useState)(false);
+  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}`}`
+  }));
+  const shouldRenderOptions = input?.type === 'select' || input?.type === 'multiple' || input?.type === 'choices';
+  const handleSelectOptionBlur = (e, optionIndex) => {
+    const {
+      value
+    } = e.target;
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.label`, value);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "drag-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon"
+  }, "H")), /*#__PURE__*/React.createElement("div", {
+    className: "input-options-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "controls-container"
+  }, /*#__PURE__*/React.createElement(_f.SelectInput, {
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.type`,
+    options: [{
+      value: '',
+      label: 'Select an option',
+      disabled: true
+    }, {
+      value: 'text',
+      label: 'Basic input'
+    }, {
+      value: 'textarea',
+      label: 'Long paragraph'
+    }, {
+      value: 'select',
+      label: 'Dropdown select'
+    }, {
+      value: 'editor',
+      label: 'Editor input'
+    }, {
+      value: 'multiple',
+      label: 'Checkboxes'
+    }, {
+      value: 'choices',
+      label: 'Radio buttons'
+    }]
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "controls"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => onDelete(inputIndex)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "D")), /*#__PURE__*/React.createElement("div", {
+    className: "is-required"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "s0"
+  }, "Required"), /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
+    handleOnChange: handleToggleRequired,
+    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(_a.Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef,
+    preferredPrimaryOrder: preferredPopoverOrder
+  }, /*#__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", {
+    className: "input-name-description"
+  }, /*#__PURE__*/React.createElement(_f.TextInput, {
+    label: "Input name",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.label`,
+    placeholder: "Question"
+  }), hasDescription && /*#__PURE__*/React.createElement(_f.TextInput, {
+    label: "Description(optional)",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.description`,
+    placeholder: "Describe details for the question"
+  })), shouldRenderOptions && /*#__PURE__*/React.createElement(_formik.FieldArray, {
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.options`
+  }, _ref2 => {
+    let {
+      push,
+      remove
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "input-options"
+    }, /*#__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}`
+    }), /*#__PURE__*/React.createElement(_f.TextInput, {
+      name: `sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.value`,
+      placeholder: `Option ${optionIndex + 1}`,
+      onBlur: e => handleSelectOptionBlur(e, optionIndex)
+    }), input?.conditionalNavigation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_f.SelectInput, {
+      options: [{
+        label: 'Select section',
+        value: '',
+        disabled: true
+      }, ...availableSections],
+      name: `sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.nextSection`
+    })), /*#__PURE__*/React.createElement("button", {
+      className: "icon",
+      type: "button",
+      onClick: () => remove(optionIndex)
+    }, "Y"))), /*#__PURE__*/React.createElement("button", {
+      className: "add-option-cta",
+      type: "button",
+      onClick: () => push({
+        key: `sections-${sectionIndex}-inputs-${inputIndex}-options-${input.options.length - 1}`,
+        value: '',
+        label: '',
+        nextSection: ''
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "icon-container"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "icon"
+    }, "+")), /*#__PURE__*/React.createElement("span", {
+      className: "text x-paragraph c-x"
+    }, "Add Option")));
+  })));
+};
+InputBuilder.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 preferred primary order of the popover
+   */
+  preferredPopoverOrder: _propTypes.default.arrayOf(_propTypes.default.string)
+};
+InputBuilder.defaultProps = {
+  preferredPopoverOrder: ['right', 'bottom', 'left', 'top']
+};
+var _default = exports.default = InputBuilder;

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

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

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