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

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

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

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

@@ -0,0 +1,15 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+
+.#{bem.$base}.renderer {
+  > form {
+    > .navigator-container {
+      display: flex;
+      gap: var(--gap);
+      margin-top: $default-margin;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Builder", {
+  enumerable: true,
+  get: function () {
+    return _Builder.Builder;
+  }
+});
+Object.defineProperty(exports, "Renderer", {
+  enumerable: true,
+  get: function () {
+    return _Renderer.Renderer;
+  }
+});
+var _Builder = require("./Builder");
+var _Renderer = require("./Renderer");

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

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

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

@@ -0,0 +1,7 @@
+// /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// @use "@pareto-engineering/bem";
+
+// .#{bem.$base}.form-builder{
+
+// }

package/dist/cjs/g/index.js

@@ -15,5 +15,12 @@ Object.defineProperty(exports, "ExpandableLexicalPreview", {
     return _ExpandableLexicalPreview.ExpandableLexicalPreview;
   }
 });
+Object.defineProperty(exports, "FormBuilder", {
+  enumerable: true,
+  get: function () {
+    return _FormBuilder.FormBuilder;
+  }
+});
 var _ExpandableLexicalPreview = require("./ExpandableLexicalPreview");
-var _DragAndDrop = require("./DragAndDrop");
+var _DragAndDrop = require("./DragAndDrop");
+var _FormBuilder = require("./FormBuilder");

package/dist/es/a/ToggleSwitch/ToggleSwitch.js

@@ -18,7 +18,8 @@ const ToggleSwitch = ({
   style,
   handleOnChange,
   checked,
-  size
+  size,
+  inputId
   // ...otherProps
 }) => /*#__PURE__*/React.createElement("button", {
   id: id,
@@ -31,11 +32,11 @@ const ToggleSwitch = ({
   // {...otherProps}
 }, /*#__PURE__*/React.createElement("input", {
   type: "checkbox",
-  id: "switch",
+  id: inputId,
   checked: checked,
   onChange: handleOnChange
 }), /*#__PURE__*/React.createElement("label", {
-  htmlFor: "switch"
+  htmlFor: inputId
 }));
 ToggleSwitch.propTypes = {
   /**
@@ -61,9 +62,13 @@ ToggleSwitch.propTypes = {
   /**
    * The size of this element
    */
-  size: PropTypes.string
+  size: PropTypes.string,
+  /**
+   * The ID of the elelment to be toggled
+   */
+  inputId: PropTypes.string
 };
 ToggleSwitch.defaultProps = {
-  // someProp:false,
+  inputId: 'switch'
 };
 export default ToggleSwitch;

package/dist/es/f/FormInput/FormInput.js

@@ -29,6 +29,13 @@ const FormInput = ({
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'multiple') {
+    return /*#__PURE__*/React.createElement(ChoicesInput, _extends({
+      className: newClassName,
+      disabled: disabled,
+      multiple: true
+    }, otherProps));
+  }
   if (type === 'choices') {
     return /*#__PURE__*/React.createElement(ChoicesInput, _extends({
       className: newClassName,

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

@@ -59,11 +59,15 @@ const EditorInput = ({
   showDebugger,
   stopPropagationKeys,
   setEditorState
+  // handleOnChange,
   // ...otherProps
 }) => {
-  const formik = useFormikContext();
+  const {
+    values,
+    setFieldValue
+  } = useFormikContext();
   const setInitialValue = () => {
-    const value = formik.values[name];
+    const value = values[name];
     try {
       JSON.parse(value);
       return value;
@@ -98,10 +102,7 @@ const EditorInput = ({
     }
   };
   const onChange = state => {
-    formik.setValues({
-      ...formik.values,
-      [name]: JSON.stringify(state)
-    });
+    setFieldValue(name, JSON.stringify(state));
   };
   const initialConfig = {
     nameSpace: name,
@@ -138,7 +139,8 @@ const EditorInput = ({
   }, label), !disabled && /*#__PURE__*/React.createElement(ToolbarPlugin, null), /*#__PURE__*/React.createElement(RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
       className: "content-editable",
-      id: name
+      id: name,
+      name: name
     }),
     ErrorBoundary: LexicalErrorBoundary
   }), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(CheckListPlugin, null), /*#__PURE__*/React.createElement(OnChangePlugin, {

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

@@ -1,3 +1,4 @@
+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.0.12 */
 import * as React from 'react';
 import { memo } from 'react';
@@ -32,8 +33,8 @@ const SelectInput = ({
   autoComplete,
   placeholder,
   getTagColor,
-  multiple
-  // ...otherProps
+  multiple,
+  ...otherProps
 }) => {
   const inputProps = {
     name,
@@ -56,7 +57,7 @@ const SelectInput = ({
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, /*#__PURE__*/React.createElement(Input, inputProps));
+  }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, otherProps)));
 };
 SelectInput.propTypes = {
   /**

package/dist/es/f/fields/SelectInput/common/Single/Single.js

@@ -31,8 +31,8 @@ const Single = ({
   description,
   disabled,
   isLoading,
-  autoComplete
-  // ...otherProps
+  autoComplete,
+  ...otherProps
 }) => {
   const [field,, helpers] = useField({
     name,
@@ -64,7 +64,7 @@ const Single = ({
     id: name,
     disabled: disabled,
     autoComplete: autoComplete
-  }), options.map(option => {
+  }, otherProps), options.map(option => {
     // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
     const newOption = typeof option === 'string' ? {
       value: option,

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

@@ -0,0 +1,65 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+
+// Local Definitions
+
+import { Renderer, Builder } from "./common";
+const baseClassName = styleNames.base;
+const componentClassName = 'form-builder';
+
+/**
+ * This is the component description.
+ */
+const FormBuilder = ({
+  id,
+  className: userClassName,
+  style,
+  mode,
+  formData,
+  formBuilderId,
+  onBuilderFormSave,
+  onRendererFormSave
+  // ...otherProps
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, mode === 'build' && /*#__PURE__*/React.createElement(Builder, {
+  formBuilderId: formBuilderId,
+  onSave: onBuilderFormSave
+}), mode === 'render' && /*#__PURE__*/React.createElement(Renderer, {
+  formData: formData,
+  onSave: onRendererFormSave
+}));
+FormBuilder.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 mode of the form builder to determine whether to render a form or build a form
+   */
+  mode: PropTypes.oneOf(['build', 'render']),
+  /**
+   * This is the ID of the form element in the <Builder /> component
+   */
+  formBuilderId: PropTypes.string.isRequired
+};
+FormBuilder.defaultProps = {
+  mode: 'build'
+};
+FormBuilder.Builder = Builder;
+FormBuilder.Renderer = Renderer;
+export default FormBuilder;

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

@@ -0,0 +1,142 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react';
+import { Formik, Form, FieldArray } from 'formik';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import { SelectInput } from "../../../../f";
+import { Section } from "./common";
+import "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.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 = ({
+  id,
+  className: userClassName,
+  style,
+  onSave,
+  formBuilderId
+  // ...otherProps
+}) => {
+  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, {
+    initialValues: {
+      sections: [{
+        title: '',
+        description: '',
+        key: 'section-0',
+        inputs: [],
+        orderedInputDragIds: [],
+        navigation: {
+          nextSection: 'next'
+        }
+      }]
+    },
+    onSubmit: handleSubmit
+  }, ({
+    values
+  }) => {
+    const availableSections = values.sections.map((section, idx) => ({
+      value: idx,
+      label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
+    }));
+    return /*#__PURE__*/React.createElement(Form, {
+      id: formBuilderId
+    }, /*#__PURE__*/React.createElement(FieldArray, {
+      name: "sections"
+    }, ({
+      push
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, values.sections.map((section, index) => /*#__PURE__*/React.createElement(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(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.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string)
+};
+Builder.defaultProps = {
+  // someProp:false
+};
+export default Builder;

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

@@ -0,0 +1,216 @@
+/* @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 { 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 "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'input-builder';
+
+/**
+ * This is the component description.
+ */
+const InputBuilder = ({
+  id,
+  className: userClassName,
+  style,
+  sectionIndex,
+  inputIndex,
+  onDelete,
+  // onCopy,
+  preferredPopoverOrder
+  // ...otherProps
+}) => {
+  const {
+    values,
+    setFieldValue
+  } = 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 = 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) => ({
+    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(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(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(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(TextInput, {
+    label: "Input name",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.label`,
+    placeholder: "Question"
+  }), hasDescription && /*#__PURE__*/React.createElement(TextInput, {
+    label: "Description(optional)",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.description`,
+    placeholder: "Describe details for the question"
+  })), shouldRenderOptions && /*#__PURE__*/React.createElement(FieldArray, {
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.options`
+  }, ({
+    push,
+    remove
+  }) => /*#__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(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(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.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 primary order of the popover
+   */
+  preferredPopoverOrder: PropTypes.arrayOf(PropTypes.string)
+};
+InputBuilder.defaultProps = {
+  preferredPopoverOrder: ['right', 'bottom', 'left', 'top']
+};
+export default InputBuilder;

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+export { default as InputBuilder } from "./InputBuilder";