@pareto-engineering/design-system 5.2.1 → 5.4.0

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

@@ -1,178 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react';
-import { useEffect } 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,
-  onError,
-  validate,
-  formBuilderId,
-  initialValues = {}
-  // ...otherProps
-}) => {
-  const handleSubmit = values => {
-    const reOrderedValues = reorderInputs(values);
-    onSave?.(reOrderedValues);
-  };
-  const initialFormState = initialValues?.sections ? initialValues : {
-    sections: [{
-      title: '',
-      description: '',
-      key: 'section-0',
-      inputs: [],
-      orderedInputDragIds: [],
-      navigation: {
-        nextSection: 'next'
-      }
-    }]
-  };
-  const handleDeleteSection = ({
-    index,
-    remove,
-    values
-  }) => {
-    remove(index);
-    values.sections.splice(index, 1);
-    values.sections.forEach((section, sectionIndex) => {
-      section.inputs.forEach((input, inputIndex) => {
-        // eslint-disable-next-line no-param-reassign
-        input.name = `section_${sectionIndex}_input_${inputIndex}`;
-      });
-    });
-  };
-  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: initialFormState,
-    onSubmit: handleSubmit,
-    validate: validate
-  }, ({
-    values,
-    errors,
-    setFieldValue
-  }) => {
-    useEffect(() => {
-      const reOrderedValues = reorderInputs(values);
-      onSave?.(reOrderedValues);
-    }, [values]);
-    useEffect(() => {
-      onError?.(errors);
-    }, [errors, 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,
-      remove
-    }) => /*#__PURE__*/React.createElement(React.Fragment, null, values?.sections?.map((section, index) => /*#__PURE__*/React.createElement(Section, {
-      key: section.key,
-      index: index,
-      handleDeleteSection: () => handleDeleteSection({
-        index,
-        remove,
-        values,
-        setFieldValue
-      })
-    })), /*#__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/ActionsContainer/ActionsContainer.js

@@ -1,70 +0,0 @@
-/* @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 styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
-
-// Local Definitions
-
-import { useOutsideClick } from "../../../../../../utils";
-import { Popover } from "../../../../../../a";
-const baseClassName = styleNames.base;
-const componentClassName = 'actions-container';
-
-/**
- * This is the component description.
- */
-const ActionsContainer = ({
-  id,
-  className: userClassName,
-  style,
-  preferredPopoverOrder,
-  children
-  // ...otherProps
-}) => {
-  const parentRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  useOutsideClick(parentRef, () => setIsOpen(false));
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style,
-    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
-  }, children));
-};
-ActionsContainer.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 order for the popover
-   */
-  preferredPopoverOrder: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * The children of the actions container
-   */
-  children: PropTypes.node
-};
-ActionsContainer.defaultProps = {
-  preferredPopoverOrder: ['right', 'bottom', 'left', 'top']
-};
-export default ActionsContainer;

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

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

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

@@ -1,59 +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}.actions-container {
-  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;
-        }
-
-        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
-        > button {
-          background: transparent;
-          border: 0;
-          color: var(--paragraph);
-          cursor: pointer;
-          font-size: calc(var(--s0) * .875rem);
-          text-align: left;
-          width: 100%;
-        }
-      }
-    }
-  }
-}
-
-

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