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

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

package/dist/es/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/es/g/FormBuilder/common/Builder/common/Section/Section.js

@@ -0,0 +1,120 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { Form, FieldArray, useFormikContext } from 'formik';
+import PropTypes from 'prop-types';
+
+// Local Definitions
+
+import styleNames from '@pareto-engineering/bem/exports';
+import { TextInput, EditorInput } from "../../../../../../f";
+import { DragAndDrop } from "../../../../..";
+import { InputBuilder } from "../InputBuilder";
+const baseClassName = styleNames.base;
+const componentClassName = 'section';
+
+/**
+ * This is the component description.
+ */
+const Section = ({
+  id,
+  className: userClassName,
+  style,
+  index
+  // ...otherProps
+}) => {
+  const {
+    values,
+    setFieldValue
+  } = 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] = useState([]);
+  const {
+    inputs
+  } = section;
+  useEffect(() => {
+    const items = inputs.map((input, indx) => ({
+      Content: /*#__PURE__*/React.createElement(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(TextInput, {
+    name: `sections.${index}.title`,
+    placeholder: `Title of the ${index === 0 ? 'form' : 'section'}`
+  }), /*#__PURE__*/React.createElement(EditorInput, {
+    name: `sections.${index}.description`,
+    label: `${index === 0 ? 'Form' : 'Section'} description`
+  }), /*#__PURE__*/React.createElement(FieldArray, {
+    name: `sections.${index}.inputs`
+  }, ({
+    push
+  }) => /*#__PURE__*/React.createElement(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.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string)
+};
+Section.defaultProps = {
+  // someProp:false
+};
+export default Section;

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

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

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

@@ -0,0 +1,2 @@
+export { Section } from "./Section";
+export { InputBuilder } from "./InputBuilder";

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

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

package/dist/es/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);
+            }
+          }
+        }
+      }
+    }
+  }
+}