@pareto-engineering/design-system 5.3.0 → 5.5.0

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

@@ -1,241 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react';
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import { FieldArray, useFormikContext } from 'formik';
-import styleNames from '@pareto-engineering/bem/exports';
-import { ChoicesInput, SelectInput, TextInput, integerAndGreaterThanZero, fileUploadOptions } from "../../../../../../f";
-import { ToggleSwitch } from "../../../../../../a";
-import "./styles.scss";
-
-// Local Definitions
-
-import { ActionsContainer } from "../ActionsContainer";
-const baseClassName = styleNames.base;
-const componentClassName = 'input-builder';
-const getToggleSwitchStyles = condition => condition ? {
-  '--slider-background-color': 'var(--disabled)'
-} : {};
-
-/**
- * This is the component description.
- */
-const InputBuilder = ({
-  id,
-  className: userClassName,
-  style,
-  sectionIndex,
-  inputIndex,
-  onDelete
-  // ...otherProps
-}) => {
-  const {
-    values,
-    setFieldValue
-  } = useFormikContext();
-  const input = values.sections[sectionIndex]?.inputs[inputIndex];
-  const handleToggleRequired = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
-  };
-  const [hasDescription, setHasDescription] = useState(false);
-  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);
-  };
-  const isFile = input?.type === 'file';
-  const handleToggleShowSpecificFileTypes = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
-  };
-  const textChoices = ['text', 'number', 'textarea', 'latex-preview-input'];
-  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: 'number',
-      label: 'Number input'
-    }, {
-      value: 'textarea',
-      label: 'Long paragraph'
-    }, {
-      value: 'select',
-      label: 'Dropdown select'
-    }, {
-      value: 'multiple',
-      label: 'Checkboxes'
-    }, {
-      value: 'choices',
-      label: 'Radio buttons'
-    }, {
-      value: 'file',
-      label: 'File upload'
-    }, {
-      value: 'latex-preview-input',
-      label: 'Textbox with LaTeX preview'
-    }]
-  }), /*#__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: getToggleSwitchStyles(!input?.required),
-    inputId: `sections_${sectionIndex}_inputs.${inputIndex}_toggle`
-  })), /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__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("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"
-  })), textChoices.includes(input?.type) && /*#__PURE__*/React.createElement("div", {
-    className: "character-limit-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "is-required"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "s0"
-  }, "Limit number of characters permitted for this input"), /*#__PURE__*/React.createElement(ToggleSwitch, {
-    handleOnChange: () => {
-      setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.hasCharacterLimit`, !input?.hasCharacterLimit);
-      if (!input?.hasCharacterLimit) {
-        setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.maxLength`, '');
-      }
-    },
-    checked: input?.hasCharacterLimit,
-    style: getToggleSwitchStyles(!input?.hasCharacterLimit),
-    inputId: `sections_${sectionIndex}_inputs.${inputIndex}_character_limit_toggle`
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "character-limit-input"
-  }, input?.hasCharacterLimit && /*#__PURE__*/React.createElement(TextInput, {
-    label: "Enter the maximum number of characters permitted.",
-    name: `sections.${sectionIndex}.inputs.${inputIndex}.maxLength`,
-    placeholder: "",
-    type: "number",
-    validate: integerAndGreaterThanZero,
-    value: input?.maxLength
-  }))), 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")))), isFile && /*#__PURE__*/React.createElement("div", {
-    className: "input-file-options"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    label: "Maximum number of files",
-    name: `sections.${sectionIndex}.inputs.${inputIndex}.maxCount`,
-    placeholder: "1",
-    type: "number",
-    min: "0",
-    validate: integerAndGreaterThanZero
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "specific-file-types"
-  }, /*#__PURE__*/React.createElement(ToggleSwitch, {
-    handleOnChange: handleToggleShowSpecificFileTypes,
-    checked: input?.showSpecificFileTypes,
-    style: getToggleSwitchStyles(!input?.showSpecificFileTypes),
-    inputId: `sections_${sectionIndex}_inputs.${inputIndex}_show_specific_file_types`
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "s0"
-  }, "Allow only specific file types")), input?.showSpecificFileTypes && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ChoicesInput, {
-    name: `sections.${sectionIndex}.inputs.${inputIndex}.accept`,
-    options: fileUploadOptions,
-    multiple: true
-  })))));
-};
-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)
-};
-InputBuilder.defaultProps = {
-  // some properties
-};
-export default InputBuilder;

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

@@ -1,2 +0,0 @@
-/* @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

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