@pareto-engineering/design-system 5.2.1 → 5.4.0

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

@@ -1,169 +0,0 @@
-/* @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);
-          }
-        }
-      }
-    }
-
-    > .input-name-description {
-      display: flex;
-      flex-direction: column;
-      gap: var(--gap);
-      margin-bottom: $default-margin;
-    }
-
-    > .character-limit-container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--gap);
-
-      > .is-required {
-        display: flex;
-        flex-direction: row;
-      }
-
-      > .character-limit-input {
-        flex-direction: column;
-      }
-    }
-
-    > .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;
-        }
-      }
-    }
-
-    > .input-file-options {
-      display: flex;
-      flex-direction: column;
-      gap: var(--gap);
-      margin-bottom: $default-margin;
-
-      > .specific-file-types {
-        display: flex;
-      }
-    }
-  }
-}
-
-

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

@@ -1,135 +0,0 @@
-/* @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";
-import { ActionsContainer } from "../ActionsContainer";
-import "./styles.scss";
-const baseClassName = styleNames.base;
-const componentClassName = 'builder-section';
-
-/**
- * This is the component description.
- */
-const Section = ({
-  id,
-  className: userClassName,
-  style,
-  index,
-  handleDeleteSection
-  // ...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 orderMap = new Map();
-    section.orderedInputDragIds.forEach((identifier, indx) => orderMap.set(identifier, indx));
-    const orderedInputs = inputs.sort((a, b) => orderMap.get(a.name) - orderMap.get(b.name));
-    const items = orderedInputs.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]);
-  const dragAndDropKey = draggableInputs.map(e => e.identifier).join(',');
-  return /*#__PURE__*/React.createElement("div", {
-    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}`), 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, {
-    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: dragAndDropKey
-  }), /*#__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

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

package/dist/es/g/FormBuilder/common/Builder/common/Section/styles.scss

@@ -1,71 +0,0 @@
-/* @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 */
-
-    > .#{bem.$base}.drag-and-drop {
-      >.drag-over {
-        > .#{bem.$base}.input-builder {
-          border: 1px dashed var(--ui-lines);
-        }
-      }
-    }
-
-    > .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,3 +0,0 @@
-export { Section } from "./Section";
-export { InputBuilder } from "./InputBuilder";
-export { ActionsContainer } from "./ActionsContainer";

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

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

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

@@ -1,63 +0,0 @@
-/* @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);
-
-        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
-        > span {
-          white-space: nowrap;
-        }
-
-        > .#{bem.$base}.select-input {
-          flex: auto;
-        }
-      }
-    }
-  }
-}

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

@@ -1,187 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react';
-import { useState, useEffect, useRef } from 'react';
-import { Formik, Form } from 'formik';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import { Button } from "../../../../b";
-import "./styles.scss";
-
-// Local Definitions
-
-import { applyCharacterLimit } from "../../../../utils";
-import { Section } from "./common";
-const baseClassName = styleNames.base;
-const componentClassName = 'renderer';
-const validate = (currentSectionIndex, formData, 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';
-  }
-
-  // Check required fields for current section
-  formData.sections[currentSectionIndex].inputs.forEach(input => {
-    if (input.required && !values[input.name]) {
-      errors[input.name] = 'This field is required';
-    }
-  });
-  return errors;
-};
-const reconstructFormDataWithValues = (formData, values) => {
-  const valuesMap = {};
-  Object.keys(values).forEach(async key => {
-    if (!key.includes('files')) {
-      valuesMap[key] = values[key];
-    }
-  });
-  const newData = {
-    ...formData,
-    sections: formData.sections.map(section => ({
-      ...section,
-      inputs: section.inputs.map(input => ({
-        ...input,
-        value: valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value
-      }))
-    }))
-  };
-  return newData;
-};
-
-/**
- * This is the component description.
- */
-const Renderer = ({
-  id,
-  className: userClassName,
-  style,
-  formData,
-  readOnly,
-  onSave,
-  shouldSubmit,
-  fileUploadStatus,
-  handleFileDelete,
-  onFileUpload,
-  shouldUpdateInputStateInRealTime = true
-  // ...otherProps
-}) => {
-  const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
-  const [sectionHistory, setSectionHistory] = useState([]);
-  const [updatedFormData, setUpdatedFormData] = useState({
-    ...formData
-  });
-  useEffect(() => {
-    setUpdatedFormData(formData);
-  }, [formData]);
-  const initialValues = formData.sections.reduce((acc, section) => {
-    section.inputs.forEach(input => {
-      acc[input.name] = input.value || '';
-    });
-    return acc;
-  }, {});
-  const handleSubmit = values => {
-    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' ? updatedFormData.sections.length // submit
-      : parseInt(currentSection.navigation.nextSection, 10); // go to specific section
-    }
-    if (nextSectionIndex >= updatedFormData.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]);
-    }
-  };
-  const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1 || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit';
-  const ref = useRef(null);
-  const currentSectionInputs = updatedFormData.sections[currentSectionIndex].inputs;
-  const hasErrorsOnInitialRender = currentSectionInputs.some(input => input.required && !ref.current?.values[input.name] || ref.current?.errors[input.name]);
-  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,
-    validate: values => validate(currentSectionIndex, updatedFormData, values),
-    innerRef: ref
-  }, ({
-    values,
-    errors
-  }) => {
-    useEffect(() => {
-      if (shouldUpdateInputStateInRealTime) {
-        const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
-        onSave?.(formDataWithValues);
-      }
-    }, [values]);
-    useEffect(() => {
-      applyCharacterLimit({
-        setMaxLength: false
-      });
-    }, [values]);
-    const hasErrors = Object.keys(errors).length > 0;
-    return /*#__PURE__*/React.createElement(Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
-      key: `${section.title}`
-    }, section, {
-      readOnly: readOnly,
-      fileUploadStatus: fileUploadStatus,
-      handleFileDelete: handleFileDelete,
-      onFileUpload: onFileUpload,
-      sectionIndex: sectionIndex
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "navigator-container"
-    }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(Button, {
-      className: "previous-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",
-      disabled: hasErrors || hasErrorsOnInitialRender
-    }, isSubmit ? 'Submit' : 'Next')));
-  }));
-};
-Renderer.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)
-};
-Renderer.defaultProps = {
-  // someProp: false,
-};
-export default Renderer;